CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-devtools
Troy Cosentino
Troy Cosentino

Reputation: 4778

Only part of CSS file is getting loaded in Chrome

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:

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

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

Upvotes: 11

Views: 3431

Answers (3)

Leopoldo Sanczyk
Leopoldo Sanczyk

Reputation: 1609

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/

Upvotes: 4

andyb
andyb

Reputation: 43823

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

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 216

Edit: Investigation carried out on Chrome 23.0.1271.97 m

Upvotes: 9

Mr. Mr.
Mr. Mr.

Reputation: 4285

I have tried running it through some parsers:

http://www.codebeautifier.com

http://www.cssportal.com/css-validator

Unfortunately they cannot seem to read completely through your css file, you should run your css through them as the results are too big to post here. I think when you minified there may have been many things that could have happened, wrong encoding, spaces moved that were actually necessary.

From the results the parsers provided I would suggest you revert back to the unminified version and start again because the errors I have seen here are too numerous ( over 900 were identified) for you to try and 'fix' the css.

Upvotes: 1

Related Questions