Deutsch English
Internet Read this post in English

„position: fixed;“ flackert beim Scrollen in Firefox 3.5

Verzögerter Bildaufbau in Firefox 3.5

Abb. 1

Manch einem Windows-User ist es vielleicht schon auf der ein oder anderen Internetseite aufgefallen: Seit dem Update auf die aktuelle Firefox-Version 3.5 fangen fixierte Bilder (bzw. fixierte Container mit Hintergrundbild) beim Scrollen so furchtbar zu flackern an, daß es fast in den Augen weh tut. So verhielt es sich denn auch hier auf meiner Seite mit den Fotos links und den Münzen oben. Eine rasche Google-Suche ergab, daß der Bug bereits gemeldet worden ist. Im aktuellen Nightly-Build ist der Fehler schon behoben; allerdings wird der Fix vermutlich erst im nächsten großen Update implementiert, also Firefox 4.0 – und das läßt bestimmt noch ein Weilchen auf sich warten.
In der Zwischenzeit kann man sich behelfen, indem man dem fixierten Bild/Container ein overflow: auto; verpaßt. Das ergibt zwar überhaupt gar keinen Sinn, funktioniert aber trotzdem.

Um die Sache etwas zu veranschaulichen, habe ich das Problem hier mal nachgebaut. Das Flackern des linken Bildes tritt nur unter ganz bestimmten Bedingungen auf, aus denen ich selbst auch nicht ganz schlau werde. Zum einen müssen sich mindestens zwei fixierte Bilder auf der Seite befinden; ein einzelnes allein flackert nicht. Zum anderen muß bei dem Hintergrund, über den gescrollt wird, die Eigenschaft overflow (oder overflow-x/overflow-y) auf hidden gesetzt sein. Außerdem dürfen die beiden fixierten Bilder nicht zu nah nebeneinander stehen – erst ab einem bestimmten Abstand zueinander beginnen sie zu flackern. Und schließlich spielt auch noch die Größe eine Rolle: In meinem Testbeispiel flackert das Bild im div erst ab einer Größe von 400×345 Pixeln – jawohl, 345, und keinen Pixel weniger!

Zerstörte Flash-Objekte

Abb. 2

Nun denn, das schlimmste Problem auf dieser Seite konnte ich also mit overflow: auto; beheben. Allein in der unteren linken Ecke sieht man – so man einen großen Monitor besitzt – den Holz-Hintergrund noch leicht flackern. Das stört jedoch so wenig, daß ich mich nicht weiter um eine Lösung bemüht habe.
Trotzdem ist das Scrollvergnügen im Firefox 3.5 nach wie vor stark beeinträchtigt. Der Browser scheint arge Probleme mit dem Redraw zu haben, und zwar genau an den Stellen, an denen sich im Hintergrund die fixierten divs befinden. Der Bildaufbau ist hier so stark verzögert, daß es sich sogar auf einem Screenshot festhalten läßt! (Abb. 1)
Außerdem überlappen die divs sämtliche Flash-Objekte – obwohl diese natürlich eigentlich auf einer höheren Ebene liegen. (Abb. 2)

Grafikfehler im Internet Explorer

Hübsch!

Alles in allem gibt es wahrscheinlich nur sehr wenige Seiten, die die völlig durchgeknallten Bedingungen für das Flackern erfüllen, sodaß man nicht gerade häufig auf dieses Problem stoßen wird. Trotzdem hat dieser Bug mein Weltbild in seinen Grundfesten erschüttert. Das ist das erste mal, daß mein langjähriger Lieblingsbrowser eine geradezu IE-artige Unfähigkeit an den Tag legt. Wollen wir hoffen, daß es bis zur Version 4 nicht mehr allzu lang dauert und daß damit wieder die gewohnte Qualität zurückkehrt.
Ach, und à propos IE: Der sieht bei mir in letzter Zeit öfter mal so aus :) →



Kommentare

  1. 9. November 2009
    13:57 Uhr

    Ginchen flag

    Das mit den Plugins ist natürlich ein guter Gedanke. Ich hab’s also direkt mal im Safe-Mode von FF probiert – und ich schwöre, bei mir flackert es immer noch! :D

    ABER: Inzwischen flackert es bei mir auch nur noch dann, wenn ich den Browser maximiert habe! Das war auch mal anders!

    Ist schon ein Kuriosum, aber da ich ja nicht die Einzige bin/war und es bei Mozilla tatsächlich als Bug gefixt worden ist, bilde ich mir das wohl nicht nur ein! Puh! ;)

  2. 9. November 2009
    12:21 Uhr

    Günni flag

    Also bei mir flackert auch nichts, habe gerade noch mal nachgeguckt, habe die Version 3.5.5 von FF und hier sieht es alles bestens aus, genauso wie auf der Testseite, kein Flackern beim scrollen nichts.
    Vielleicht liegt das auch an diversen PlugIns?
    Denn so wie das aussieht, spaltet sich das in 2 Lager, bei den einen gehts, bei den anderen nicht. Scheint aber definitiv nicht nur an der Version zu liegen.
    na auf alle Fälle mal aufmerksam verfolgen das ganze.
    Trotzdem vielen Dank für die ganzen Mühen, Respekt
    Günni

  3. 10. August 2009
    0:31 Uhr

    Ginchen flag

    Naja, wie gesagt braucht es anscheinend ziemlich viele beknackte Faktoren, damit es auch wirklich flackert … Bei mir flackert die Testseite wirklich immer. Aber wenn man Firebug hat, kann man ja auch mal kurz auf dieser Seite hier das overflow: auto; bei dem div mit der ID „photos“ ausschalten. Dann sollte man es links deutlich flackern sehen.

  4. 7. August 2009
    15:10 Uhr

    dreadman flag

    Bei mir flackert bei der Testseite da auch nix.
    Dafür flackerte es auf meiner eigenen Seite bis ich diese tolle Übergangslösung einbaute :D

  5. 28. Juli 2009
    18:04 Uhr

    Ginchen flag

    Hmm, aber Du hast auch die Mac-Version, ne? Dann isses da wohl nicht so.
    Bei mir flackert es auf meiner Testseite zu 100 %! Ohne Ausnahme. Und eben auch hier auf der Seite unten links.

    [Edit]: Grad nochmal auf dem Notebook getestet – flackert definitiv! ;)

  6. 28. Juli 2009
    16:18 Uhr

    Felix flag

    Also bei mir flackert da gar nichts.

Kommentieren

Erlaubtes HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong> <img src="" alt="" class="" width="" height=""> | Codeschnipsel können in `backticks` gepostet werden. Beispiel: `<?php echo "Hi!"; ?>`