Only part of CSS file is getting loaded in Chrome

Question

For some reason my page is only loading part (about 1/3 of my CSS file). It is a concatenated and minified. If I go to http://staging.easyuniv.com/styles/dbf42ab5.main.css I can see the whole thing.

The weirdest part is that if look at sources in Chrome Dev Tools, about a third of the way it goes blank (right in the middle of a class name), but then you can scroll the rest of the way as if the text were there.

I am loading it on my page with the following:

Click to copy

<link rel="stylesheet" href="styles/dbf42ab5.main.css">

Anyone ever run into anything like this? I've run out of things to try.

Answer 1

The file is far from valid which should probably be looked at but here's what I've found…

• I cannot paste the contents of your CSS file into http://cssbeautify.com/ - the CSS is cut off in almost the same place as Chrome is doing
• I can paste into http://www.codebeautifier.com/ which can generate a CSS file that will load just fine! Very strange.

Through some trial and error it seem that a CSS file that is concatenated on a single line looks like it has been cut off when using the Chrome Developer Tools. The file seems to have been parsed as using Ctrl+Shift+F and searching for something at the end of the file (I was searching for zag-divider) then Chrome is reporting that it is found, although the found count seemed wrong.

Specifically, it seems that any line of this CSS file that is >= 66,537 characters will be cut off! For example:

• a single line CSS file <= 66,536 characters will not be cut off
• a single line CSS file >= 66,537 characters will be cut off
• a multi line CSS file >= 66,537 characters will have only lines that are >= 66,537 will be cut off

I had a single line of exactly 66,537 characters of CSS which was cut off, but by adding a single carriage return after the first selector and reloading, the entire file was shown correctly in the Console.

So to summarise… a CSS file with any line >= 66,537 characters looks like it has been cut off part way through in the Chrome Developer Tools although the file has actually been loaded fully. I tested this by adding a rule to the end of the line which was applied by Chrome.

Note: I would have been happier if the seemingly magic number was 2¹⁶

Edit: Investigation carried out on Chrome 23.0.1271.97 m

Answer 2

For googlers having this problem but not exclusively using Google Chrome, may be useful verify that truncation doesn't be result of a known pitfall of Nginx and virtualization, that could be resolved disabling sendfile in your server block.

You could find more about this problem in this article: http://www.conroyp.com/2013/04/25/css-javascript-truncated-by-nginx-sendfile/