Can't fix CSS minify breaks CSS on recent FireFox

[HWS]

If you activate Minify CSS in ACP the CSS output is in some cases not recognized as valid by FireFox, resulting in a broken website.

It looks like there may be a problem with media query CSS. but I did not have time to debug it further. I can reproduce it easily on our test site (where a lot of add-ons and 3 styles are installed) with switching Minify CSS on and off and in the ON position some styles do not get all CSS properly (only on Firefox).

 

[Mike]

We've had CSS minification on here for a very long time without any issue. Ideally, we'd need to be able to reproduce it and see the working non-minified CSS vs the broken minified CSS.

Note that I have seen an add-on that did some sort of additional CSS caching cause issues.

 

[Moshe1010]

Do you have a desktop mode add-on?

 

[HWS]

We've had CSS minification on here for a very long time without any issue. Ideally, we'd need to be able to reproduce it and see the working non-minified CSS vs the broken minified CSS.

Note that I have seen an add-on that did some sort of additional CSS caching cause issues.

No, we almost only use custom made addons and we do not do anything with CSS minification.

However, I can send you the non minimized CSS output and the minimized output, if that helps you. Firefox does not see a big part of the minimized output and works fine with the non-minimized file. All other browsers we tested had no issues. But Firefox is known as very picky with CSS code.

Where can I send you the files? I do not want to attach it here for privacy reasons.

 

[rdn]

Do you have pagespeed module enabled?

 

[HWS]

Do you have pagespeed module enabled?

No, we don't use any special modules at our test server.

 

[Mike]

I PM'd you about this BTW.

 

[HWS]

I PM'd you about this BTW.

Yes, thank you. I'll send you all files as soon as I can.

 

[Mike]

This appears to be related to invalid CSS -- specifically, unclosed strings -- that the browsers parse differently between the minified and non-minified values. I suspect it has to do with line breaks being removed.

This isn't something that we can really do a ton about in the short term -- really, the invalid CSS is would need to be modified. In the longer term, ideally we would be able to detect invalid CSS and trigger an error in all cases.

 

[HWS]

This appears to be related to invalid CSS -- specifically, unclosed strings -- that the browsers parse differently between the minified and non-minified values. I suspect it has to do with line breaks being removed.

This isn't something that we can really do a ton about in the short term -- really, the invalid CSS is would need to be modified. In the longer term, ideally we would be able to detect invalid CSS and trigger an error in all cases.

Thanks again for your help.

I suspected this to be due to small syntax errors in CSS code. Minification seems to make those small syntax errors worse (with Firefox even to the state of an almost unrenderable page), which should not be.

I can only recommend anyone activating CSS minification to check the validity of all CSS before. From now on we'll download all output from css.php (with minification off), check it for syntax validity and correct all errors found. Only after that we'll switch minification on.