Geek Answers Handbook

Only part of the CSS file is uploaded to Chrome.

For some reason, my page only loads part (about 1/3 of my CSS file). This is concatenation and minimization. If I go to http://staging.easyuniv.com/styles/dbf42ab5.main.css , I can see it all.

The strangest part is that if you look at the sources in Chrome Dev Tools, about a third of the path will be empty (right in the middle of the class name), but then you can scroll through the rest of the path as if the text was there.

I upload it to my page with the following:

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

Has anyone ever come across something like this? I did not have enough strength to try.

+8
css google-chrome google-chrome-devtools
source share
3 answers

The file is far from valid , which you should probably look at, but here's what I found & hellip;

Through some trial and error, it seems that a CSS file that is concatenated on one line looks like it was disabled when using the Chrome developer tools. The file apparently was parsed using Ctrl + Shift + F and searching for something at the end of the file (I was looking for the zag-divider ), then Chrome reports that it was found, although the found account seemed incorrect.

In particular, it seems that any line of this CSS file that is> = 66 537 characters will be disabled! For example:

  • single line CSS file <= 66 536 characters will not be disabled.
  • single line CSS file> = 66 537 characters will be disabled
  • a multi-line CSS file> = 66,537 characters will only have lines that> = 66,537 will be disabled.

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

So, summarize & hellip; A CSS file with any line> = 66,537 characters looks like it was partially cut off in the Chrome developer tools, although the file did indeed download completely. I checked this by adding a rule to the end of the line that was applied in Chrome.

Note: I would be happier if the magic number seemed to be 2 16

Edit: Chrome investigation 23.0.1271.97 m

+6
source share

I tried to launch it through some parsers:

http://www.codebeautifier.com

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

Unfortunately, they cannot read completely through your css file, you have to run your css through them, since the results are too large to be published here. I think that when you minimized, there might have been a lot of things that could have happened, incorrect encoding, moved spaces, which were actually needed.

From the results provided by the parsers, I suggest you return to the undefined version and start again, because the errors that I saw here are too numerous (more than 900 have been identified) for you to try to “fix” css.

+1
source share

For googlers having this problem, but not exclusively using Google Chrome, it may be useful to verify that truncation is not the result of the well-known Nginx trap and virtualization , which can be solved by disabling sendfile in your server block.

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

+1
source share

More articles:


All Articles