CSS minify causes errors

My CSS changes when CSS minify is switched on.

background: url(’/static/img/theme/ar-64.png’) no-repeat right 1rem center, linear-gradient(to left, #fab010 3.2rem, #ffc11a 3.2rem);

After it’s cached:
background:url(/static/img/theme/ar-64.png) no-repeat 100% 1rem 50%,linear-gradient(to left,#fab010 3.2rem,#ffc11a 3.2rem);

CF is changing “right 1rem center” to “100% 1rem 50%” which causes the image ar-64.png to disappear.

Should this be happening?

I would not think so. Can you post the URL?

Would you mind posting a larger portion of your .css? As it is written now, it’s not actually .css. Thanks.



Change the v value to see the uncached version, then refresh to see the CF minified version.

1 Like

It seems to turn the right into a 100% and the center into 50%. I am not a CSS guru, but I also doubt that is correct.

Most likely a case for a support ticket.

1 Like

Agree with Sandro. An appropriately minified version of your code would look something like:

a.button{background:orange;background:url(/static/img/theme/ar-64.png) no-repeat right 1rem center,linear-gradient(to left,#fab010 3.2rem,#ffc11a 3.2rem);background-size:1.2rem,100%;border-radius:.2rem;box-shadow:inset 0 -10px 10px -10px rgba(211,112,4,0.7);color:#FFF;cursor:pointer;display:inline-block;font:700 1.5rem 'Open Sans 700';margin:1rem 0;padding:.8rem 4.6rem .8rem 1.6rem;text-decoration:none;text-shadow:1px 1px #eca305;text-transform:uppercase}

Yeah, it’s strange.

An easy example is https://www.moviesonprime.com/static/css/strange3.css?v=1

I will report it.

Wow. Indeed. It should instead look something like:

a.button{background:url(/static/image.png) no-repeat right 1rem center}

I’ve not used any of Cloudflare’s minification functions for quite some time due to unwanted changes. Instead I optimize / minify my .css and .html myself. I’d do the same with javascript but do not use any.

I’ve observed similar issues in the past where keywords are replaced with shorter numeric alternatives that might not work in every context. They’re always quick to fix the problem when a support ticket is opened, so definitely go that route.

That being said, I do think it’s pretty cool that they’re finding new ways to shave off bytes, even if there are glitches from time to time.

I found out it’s to do with the order of the CSS background properties.

The position values should come before the repeat value.

So this:

a.button{background:url(/static/image.png) no-repeat right 1rem center}

Technically, should be written like this:

a.button{background:url(/static/image.png) right 1rem center no-repeat}

Then it works fine and the CSS minify works as expected.

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.