css rule limits in IE9 and below
Believe it or not, but IE9 and below has a limit on the number of css selectors which can be in any one stylesheet
Here's how we discovered it: we'd build a minified build of css into one file for staging and production. Load the app in Chrome and IE10, all is ok.
Load in IE9 and its like some styles are just not there. Looking in IE9s css debugger I could see many of our custom styles were missing (IEs debugger aint Chrome debugger but its not bad either)
I had to wrap up some work in progress (angular.js core library upgrade) but started to troubleshoot after that.
Normally one would suspect some IE quirky rule which busts the css but with such a large failure I surmised there must be a large reason, not a simple rule failure.
So, no "pussy-footing" around with this problem. I recreated the stage build locally (we have a good deploy grunt script) and just started hacking at the one large css file cutting out large chunks and reloading the css.
When load the one file but those same styles worked ok in IE9 piecemeal.
It dawned on me that some major limit may exist in IE9. As Sherlock Homles said "When all else is eliminated, what ever remains, however improbable, must be true"
Google it and voila: I discovered there is a limit in IE9
I then broken the file up into two and it worked.
It worked in IE10 because the rule limit is much higher (or does not exist)
Here's how we discovered it: we'd build a minified build of css into one file for staging and production. Load the app in Chrome and IE10, all is ok.
Load in IE9 and its like some styles are just not there. Looking in IE9s css debugger I could see many of our custom styles were missing (IEs debugger aint Chrome debugger but its not bad either)
I had to wrap up some work in progress (angular.js core library upgrade) but started to troubleshoot after that.
Normally one would suspect some IE quirky rule which busts the css but with such a large failure I surmised there must be a large reason, not a simple rule failure.
So, no "pussy-footing" around with this problem. I recreated the stage build locally (we have a good deploy grunt script) and just started hacking at the one large css file cutting out large chunks and reloading the css.
When load the one file but those same styles worked ok in IE9 piecemeal.
It dawned on me that some major limit may exist in IE9. As Sherlock Homles said "When all else is eliminated, what ever remains, however improbable, must be true"
Google it and voila: I discovered there is a limit in IE9
I then broken the file up into two and it worked.
It worked in IE10 because the rule limit is much higher (or does not exist)
Comments
Post a Comment