Darstellungsprobleme in IE9 durch veraltete Javascript-Frameworks

Wenn Microsoft eine neue Version des Internet Explorers anbietet, bekomme ich vermehrt Anfragen von Partnern und Kunden, die von Darstellungsproblemen ihrer Webseiten berichten. Neben den üblichen Hinweisen auf die Möglichkeiten der Steuerung der abwärtskompatiblen Darstellung lauern noch andere Fallstricke, gerade wenn man populäre Javascript-Frameworks nutzt. Die Gruppe The Killers hat zum Beispiel für ihre Fans eine HTML5-Version ihrer Webseite ins Netz gestellt, die in allen modernen Webbrowsern phantastisch läuft:

Wenn man aber Fan der Foo Fighters ist, sieht deren herkömmliche Webseite wastinglight.foofighters.com in verschiedenen Browsern unterschiedlich aus:

Der erste Screenshot zeigt die Webseite, so wie sie Internet Explorer 9 standardmäßig darstellt. Gegenüber Screenshot zwei (Google Chrome), drei (Mozilla Firefox) und vier (Apple Safari) fehlen dort ganze Elemente und die untere Social Media Link-Leiste wird falsch dargestellt. Woran liegt das? Als Anwender kann man als erstes auf den Kompatibilitätsbutton rechts neben der URL drücken. Schon wird die Seite auch in Internet Explorer 9 richtig dargestellt:

Die Webseite erkennt mit Hilfe einer eingebauten Webweiche die verwendete Browserversion und liefert an die verschiedenenBrowser angepasste Versionen der Webseite aus. Entwickler machen das heutzutage nicht mehr selbst, sondern nutzen dafür Javascript-Frameworks wie zum Beispiel jQuery. Mit einem Tastendruck auf F12 kann man selbst ganz einfach mit den Developer Tools im Internet Explorer nachschauen:

Hier sieht man auch sofort das Problem: Die Webseite nutzt die jQuery JavaScript Library in der veralteten Version v1.5. IE9 wird aber erst mit der aktuellen Version v1.5.2 korrekt erkannt und unterstützt. Daher wird bei der Nutzung einer veralteten Version von jQuery IE9 als uralte Version von Internet Explorer “erkannt” und der Quelltext für dieses Ziel “optimiert”.

In meinem Artikel Wohin mit dem "X-UA-Compatible"-Tag im Header? beschrieb ich, dass bei IE9 die Auswahl der Renderengine über Headereinträge gesteuert wird. Da die Änderung des Quelltextes aber erst via Javascript durchgeführt wird, ist davon nichts im Header der Webseite zu finden. Solange Internet Explorer 9 aber keine Anzeichen im Header der Webseite für die Nutzung der abwärtskompatiblen Renderengine entdeckt, arbeitet er standardmäßig mit der standardkonformen Renderengine: Standards first! Dadurch haben wir den Salat mit der falschen Darstellung.

Dieses Problem ist auf der einen Seite ziemlich häufig, auf der anderen Seite aber leicht zu beheben. Als erstes testet man die Webseite mit einer neueren Version von jQuery. Das geht mit Hilfe der Developer Tools und des Web Debugging Proxy Fiddler sehr einfach, ohne das man Zugriff auf den Quelltext der Webseite auf dem Webserver braucht.

Als erstes schauen wir uns mit beiden Tools an, was auf Netzwerkebene passiert, wenn man die Seite lädt:

Im nächsten Schritt laden wir die aktuelle Version jQuery Minified herunter, speichern sie lokal unter C:\Temp und bauen uns eine Autoresponder-Regel, die den Aufruf von jquery.min.js umlenkt auf die aktuellere, lokale Version v1.5.2:

Et voilà! Schon sieht die Seite auch in Internet Explorer 9 richtig aus:

In Fiddler kann man sehr schön sehen, wie die jQuery-Version ausgetauscht und danach ganz anderer Inhalt geladen wird. Für den Browser ist das vollkommen transparent – er ruft weiterhin https://wastinglight.foofighters.com/js/jquery.min.js auf, bekommt aber den Inhalt von C:\Temp\jquery-1.5.2.min.js anstatt der veralteten Version ausgeliefert:

jQuery ist nicht die einzige Bibliothek, bei der man mit derartigen Problemen rechnen muss. Bei einer anderen Anfrage war die Javascript-Bibliotheken SWFFit verdächtig, die falsche Zentrierung von Flash-Inhalten beim Verändern der Fenstergröße des Browsers zu verursachen. Der Diskussionsbeitrag Central positioning does not work for internet explorer 9 deutet auf diese Bibliothek als Verursacher hin. Der dazugehörige Bugreport Issue 13: Complete defect in IE9 (public beta) zeigt, dass das Problem schon längere Zeit bekannt ist. Da der Autor der Bibliothek bisher jedoch keine Zeit gefunden hat, das Problem zu lösen, kann man den Lösungsvorschlag folgen und analog zu obigem Lösungsweg eine alte Version der Bibliothek ausprobieren.

Mit Hilfe der Developer Tools und Fiddler kann man also derartige Probleme sehr leicht analysieren, testen und hoffentlich schnell beheben.

Have fun!
Daniel