Is there a maximum line length for the Chrome CSS parser?
I observe very strange behavior related to long CSS rule.
My HTML looks like this:
<section id="mysection" class="modal">...</section>
My (sass-compiled) CSS contains the following rules:
.modal {
display: none;
}
somelement, someotherelement, ... #mysection subelement,... #mysection someothersubelement, ... {
display: block;
}
Second CSS rule: 84000+ characters. Please note that this should not affect the element #mysection
, only its children.
The desired result is to hide the element #mysection
. This is done correctly in Firefox 37.0.2. In Chrome 42.0.2311.135 the element is visible - this is not correct. The developer tools indicate that an item is #mysection
affected by both rules, but the second rule takes precedence. However, I cannot find a specific part of the CSS string that affects the display property of the section.
The section becomes hidden in Chrome when I change its ID.
I can also get the correct behavior in Chrome by manually splitting the CSS string in two ~ 40k chars with the same directives display: block
. The hypothesis is that the Chrome CSS parser truncates the long string like this:
... #mysection subelement, ...
^
|
truncate here
As a consequence, the element #mysection
will affect the directive display: block
.
Is there any reason? I feel like I'm losing my mind here.
source to share
If a single css rule contains more than 4096 selectors, it creates a selector specificity overflow. This is a known bug and there are no plans for the thread to fix it.
"... because having such a high degree on a node is a very distant edge."
This is a hypothesis, but my guess is that the root cause of the problem has to do with limiting the 32-bit integer somewhere in the css parser, as this number 4096 is incredibly similar to style sheets in IE6-9.The math behind this problem is explained here ...
While this may not be very useful for your particular situation, moving the selectors to their own string appears to fix the problem .
source to share