Tipps und Tricks zu den Themen: Software- und Webentwicklung

Mittwoch, 4. Juni 2014

Notlösung für Fehler in Google Chrome bei "background-attachment:fixed" (Bugfix)

Es ist schon kaum zu glauben, dass diesmal nicht der Internet Explorer der Sündenbock ist. Unzwar erzeugt der Google-Browser Chrome in einigen Situationen einen Anzeigefehler bei der Verwendung von Seiten-fixierten Hintergrundbildern (z.B. wenn die Fixierung nicht am Seitenstart stattfindet und oberhalb verdeckt werden soll). Der Fehler äußert sich so, dass die Hintergrundbilder nicht fixiert sind und sich stattdessen um ein Vielfaches beim scrollen überlagern. Das kann bis hin zu bizarren Bildmosaiken führen, die dem Seitenbesucher das Gefühl vermittelt, die Grafikkarte sei kaputt. Leider lässt sich dieses Problem nicht ohne die Verwendung von JavaScript umgehen. Hier bliebe nur noch die Änderung des Designs (oder zumindest das Ändern der CSS-Direktive von "fixed" zu "scroll").

Nach etwas längerer Recherche und unzählig vielen Lösungsansätzen, die wir probiert aber leider nicht geholfen haben, konnten wir zumindest die Ursache mithilfe diesen Blog-Eintrags feststellen:

» Andrew Cantino: "Fixing the Chrome Background Refresh Bug"


Was verursacht diesen Fehler in Google Chrome?

Nahezu alle modernen Browser nutzen eine Technologie die häufig auch "Z-Buffering" genannt wird (Verdeckungsoptimierte Berechnung), um mehr Performance zu erreichen. Somit werden nur sichtbare Bereiche, die sich auf der Seite ändern, aktualisiert und vom Browser neugezeichnet. Leider hat der Chrome Browser einen Bug bei der Verarbeitung von fixierten Hintergrundbildern und geht irrtümlicherweise davon aus, dass das Element nicht zu sehen wäre und zeichnet dieses bei Änderungen nicht nach. In diesem Fall muss das Nachzeichnen explizit erzwungen werden, unzwar bei jeder Scroll-Bewegung auf der Seite.

Der Ansatz von Andrew Cantino aus dem oberen Link löst zwar das Problem, erzeugt dafür aber auch ein kurzes Flackern der Seite beim Scrollen. Verursacht wird dies durch das kurze Ein- und Ausblenden der fixierten Hintegrundebene. Damit ein Element vom Browser vollständig nachgezeichnet wird, muss ein Attribut geändert werden, welches sich auf die gesamte Fläche des Elementes auswirkt und zugleich tatsächlich auch sichtbar ist. Wir haben dies getestet. Auch dieses Verhalten gehört zur Verdeckungsoptimierten Berechnung und soll den Browser bei seiner Darstellung beschleunigen.

Wir haben die Idee verbessert und eine Lösung gefunden, die einerseits für das menschliche Auge unsichtbar ist, aber trotzdem dem Browser vorgaukelt, es sei eine Änderung aufgetreten.


Google Chrome Fix for "background-attachment:fixed" (jQuery)

Angenommen es gibt ein Element mit fixiertem Hintergrundbild:
Problemlösung: Diese relativ simple jQuery-Erweiterung rüstet die Objektfunktion "repaint()" an einem beliebigen jQuery-Selektor nach: Anwendungsbeispiel: So kann die Funktion dann initialisiert und genutzt werden: Hier wird zunächst geprüft ob die Seite mit dem Browser Chrome aufgerufen wurde. In diesem Fall wird das Scroll-Ereignis abgefangen/erweitert und löst das Neuzeichnen der übergebenen Elemente durch die Funktion "repaint()" aus. Mit dieser Methode können beliebig viele fixierten Hintergrundbilder auf derselben Seite aktualisiert werden. Lediglich der jQuery-Selektor muss beim Funktionsaufruf von "repaint()" geändert werden.

Zugegeben, diese Methode ist nicht gerade elegant, aber bei ungewöhnlichen Fehlern bleibt einen manchmal nichts anderes übrig als ungewöhnliche Mittel einzusetzen.



Keine Kommentare:

Kommentar veröffentlichen