{"id":1827,"date":"2009-07-23T06:28:30","date_gmt":"2009-07-23T04:28:30","guid":{"rendered":"http:\/\/blog.ginchen.de\/?p=1827"},"modified":"2012-01-29T18:11:03","modified_gmt":"2012-01-29T17:11:03","slug":"position-fixed-flackert-beim-scrollen-in-firefox-3-5","status":"publish","type":"post","link":"http:\/\/blog.ginchen.de\/en\/2009\/07\/23\/position-fixed-flackert-beim-scrollen-in-firefox-3-5\/","title":{"rendered":"”position: fixed;” flickering when scrolling in Firefox 3.5"},"content":{"rendered":"
\"Delayed<\/a>
Fig. 1<\/figcaption><\/figure>\r\n\r\n

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<\/a>. 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.
\r\nIn the meantime, you can get by with adding overflow: auto;<\/code> to the fixed image\/container. That sure doesn’t make any sense at all, but it works.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

To make things more vivid, I have recreated the problem here<\/a>. 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<\/code> (or overflow-x<\/code>\/overflow-y<\/code>) set to hidden<\/code>. 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<\/code> only flickers if its size is at least 400×345 pixels – that’s right, 345, and no less!<\/p>\r\n\r\n

\"Destroyed<\/a>
Fig. 2<\/figcaption><\/figure>\r\n\r\n

Well, so I was able to remedy the worst defect on this site using overflow: auto;<\/code>. 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.
\r\nStill 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 div<\/code>s are in the background. The image buildup is delayed so much that you can even capture it on a screenshot! (Fig. 1)
\r\nAlso, the div<\/code>s overlap all existing Flash objects – although the latter are of course on layer above them. (Fig. 2)<\/p>\r\n\r\n

\"Graphical<\/a>
Pretty!<\/figcaption><\/figure>\r\n\r\n

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.
\r\nOh, and \u00e0 propos IE: Mine lately looks like this now and then :) →<\/p>","protected":false},"excerpt":{"rendered":"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 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[139],"tags":[98,372,162,53,373,374,173,371,370],"_links":{"self":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/1827"}],"collection":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/comments?post=1827"}],"version-history":[{"count":5,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/1827\/revisions"}],"predecessor-version":[{"id":5832,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/posts\/1827\/revisions\/5832"}],"wp:attachment":[{"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/media?parent=1827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/categories?post=1827"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.ginchen.de\/en\/wp-json\/wp\/v2\/tags?post=1827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}