[:de]

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.

[:en]

Some Windows users may already have noticed it on certain websites: Since the update to the current Firefox version 3.5, fixed images (or fixed containers with background images) start flickering terribly when scrolling, so much that it almost hurts your eyes. So it was here on my site with the photos on the left and the coins at the top. A quick Google search revealed that the bug has already been reported. In the current nightly build, the error is already fixed; however, the fix will probably not be implemented until the next major update, meaning Firefox 4.0 – and that is certainly still going to be a while.
In the meantime, you can get by with adding overflow: auto; to the fixed image/container. That sure doesn’t make any sense at all, but it works.

[:][:de]

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!

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)

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 :) →

[:en]

To make things more vivid, I have recreated the problem here. The flickering of the left picture only appears under very distinct circumstances that I’m not fully able to make sense of. For one thing, there have to be at least two fixed images on the page; a single one won’t flicker. For another thing, the background you scroll over must have the property overflow (or overflow-x/overflow-y) set to hidden. Furthermore, the two images must not stand too close together – they only start flickering with a certain distance between them. And finally, the size matters as well: In my test example, the image inside the div only flickers if its size is at least 400×345 pixels – that’s right, 345, and no less!

Well, so I was able to remedy the worst defect on this site using overflow: auto;. Only in the bottom left corner you can still see the wooden background slightly flicker – if you have a big screen. That’s not too disturbing however, so I didn’t seek a further solution there.
Still the scrolling pleasure in Firefox 3.5 is sorely afflicted. The browser seems to have severe problems with the redraw, namely in those areas where the fixed divs are in the background. The image buildup is delayed so much that you can even capture it on a screenshot! (Fig. 1)
Also, the divs overlap all existing Flash objects – although the latter are of course on layer above them. (Fig. 2)

All in all there are probably only few sites that fulfill the totally crazy conditions for the flickering, so one will not encounter this problem very often. Nevertheless, this bug has shaken my world view to its very foundations. This is the first time my longstanding favorite browser shows an almost IE-like disability. Let’s hope that it won’t take too long until version 4 and that the usual quality will return with it.
Oh, and à propos IE: Mine lately looks like this now and then :) →

[:]