Aggregated CSS Rendering Issues For Mobile Browsers

Issue

If the mobile version of your site's CSS files are only partially rendering when CSS is aggregated, but the desktop version is rendering properly, one or more of your CSS files may contain an error. The syntax errors could include, but are not limited, to a missing semicolon, closing brace, or end quote.

Resolution

To confirm the issue, you can temporarily disable CSS aggregation under the Administration >> Configuration >> Performance page of your Drupal website. Flushing Varnish cache may also be required after the configuration change.

To identify errors in a CSS file it's helpful to use a CSS linter, which should be able to detect such errors more efficiently than a manual perusal. 

CSS linters and validation tools

• W3C CSS online validation service
• CSSLint online CSS linter
• StyleLint (a command-line tool for validating and linting CSS files during development)

Cause

These types of syntax errors are gracefully ignored by Desktop web browsers where newlines are still present to delimit between CSS rules. However, Drupal's CSS aggregation functionality removes the newlines, resulting in parsing problems starting at the point in the file where the syntax errors occur.