Deutsch English
Internet Diesen Artikel auf Deutsch lesen

“position: fixed;” flickering when scrolling in Firefox 3.5

Delayed image buildup in Firefox 3.5

Fig. 1

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.

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!

Destroyed Flash objects

Fig. 2

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)

Graphical error in Internet Explorer

Pretty!

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


Spread the word

Advertisement


Comments

  1. 9th November 2009
    1:57 pm

    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. 9th November 2009
    12:21 pm

    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. 10th August 2009
    12:31 am

    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. 7th August 2009
    3:10 pm

    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. 28th July 2009
    6:04 pm

    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. 28th July 2009
    4:18 pm

    Felix flag

    Also bei mir flackert da gar nichts.

Write comment

Allowed 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=""> | Code snippets can be posted in `backticks`. Example: `<?php echo "Hi!"; ?>`