Windows 7

Blog von Microsoft Deutschland

Darstellungsprobleme in IE9 durch veraltete Javascript-Frameworks

Darstellungsprobleme in IE9 durch veraltete Javascript-Frameworks

  • Comments 1
  • Likes

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:

SNAGHTML30d8979

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

SNAGHTML30ec966

SNAGHTML30f317b

SNAGHTML30f9877

SNAGHTML35038fb

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:

SNAGHTML3108d02

Die Webseite erkennt mit Hilfe einer eingebauten Webweiche die verwendete Browserversion und liefert an die verschiedenen Browser 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:

SNAGHTML317207b

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:

SNAGHTML32a058c

SNAGHTML32c4817

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:

image

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

SNAGHTML33b1dec

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 http://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:

SNAGHTML3423c83

SNAGHTML33ad401

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

Comments
  • OK in deinem FireFox hast Du wohl Flash noch nicht installiert?

    Bei mir kommt die Seite so wie sie sein soll, wie auch im Google Chrom und so müsste es überall sein. Ganz ohne Workaround.!

    IE 9 nervt die Entwickler! Aber kommt leider nicht darum herum :-(

Your comment has been posted.   Close
Thank you, your comment requires moderation so it may take a while to appear.   Close
Leave a Comment