CSS minify causes errors

Website, Application, Performance
1

My CSS changes when CSS minify is switched on.

Before:
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?

2

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

3

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

4

Sure.

https://www.moviesonprime.com/static/css/strange.css?v=1

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

1 Like
5

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
6

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}

7

Yeah, it’s strange.

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

I will report it.

8

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.

9

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.

10

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
11

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