Diesmal möchte ich hier ein Problem verarbeiten, welches mich im Prinzip einen ganzen Arbeitstag gekostet hat. Beim Patienten handelt es sich um eine recht aufwendige, prinzipiell mobile-first gebaute Seite, die grundsätzlich auf dem Bootstrap Grid basiert.
Symptom: IE9 zeigte mir eine Subseite ohne die in Media Queries definierten Styles an. Das Problem trat aber nur im „echten“ IE9 auf, in einem IE10 der auf IE9 gestellt wurde jedoch nicht.TL;DR
Die Problemsuche
Erste (etwas sehr kurz gedachte) Vermutung war, dass der IE9 einfach meine Media Queries ignoriert. Ohne jetzt länger darüber nachzudenken, habe ich wie von Bootstrap empfohlen respond.js eingebunden:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->Eigentlich in der gleichen Sekunde viel mir wieder ein (und am Conditional Comment auch auf) das respond.js ja nur für IE6-IE8 gedacht ist.
Mein zweiter Gedanke war der X-UA Compatible Header, der die meisten IE Rendering Probleme löst – der war allerdings „leider“ in meinem Framework vorhanden.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />oder in PHP:
if (isset($_SERVER['HTTP_USER_AGENT']) && (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)) {
header('X-UA-Compatible: IE=edge,chrome=1');
}Erst danach fiel mir auf, dass die von Bootstrap definierten Media Queries funktionierten und auf den zweiten Blick auch einige von meinen.
Also begann ich alle meine Media Queries mit Testdefinitionen auszustatten, die jeweils einen eindeutigen erkennbaren Testblock Block Sichtbar schalteten. Dadurch konnte ich feststellen das ca. die Hälfte meiner Media Queries funktionierten.
Der nächste Versuch war, die Media Queries anders zu sortieren, was aber zu keiner Änderung führte. Danach begann ich das CSS so auszukommentieren das nur mehr meine Testdefinitionen enthalten waren und siehe da – die Media Queries funktionierten. Das darauffolgende Schrittweise ein- und wieder auskommentieren brachte dann endlich einen nachvollziehbaren Grund für meine Probleme: Es war nicht der Code ansich der die Probleme auslöste, sondern nur die Menge.
Eine kurze Recherche bestätigten dann meinen Verdacht: IE9 hat Limits unter anderem in der Anzahl an CSS Selektoren die es verarbeiten kann. Wenn man diese Limits überschreitet, werden alle anderen Definitionen ignoriert.
Die Lösung
Im Endeffekt habe ich einfach die bootstrap.css nicht mehr im SCSS inkludiert sondern mit einem eigenen <link> Statement. Es gibt anscheinend eine Vielzahl an alternativen, allerdings war die Problemlösung extrem zeitkritisch und deswegen habe ich nach kurzen Tests zu dieser einfachen, wenn auch nicht idealen, Lösung gegriffen.
TL;DR
IE9 hat ein Limit an Selektoren, rekursiven Includes und anscheinend einigen anderen Dingen pro CSS File. Den Code auf mehrere Files aufteilen kann Abhilfe schaffen, auch wenn diese Lösung fern von ideal ist.
Links zum Thema
http://spaceninja.com/2015/03/31/ie-css-limits/
http://blog.plataformatec.com.br/2014/09/splitting-long-css-files-to-overcome-ie9-4095-rules-limit/
http://blesscss.com/