Take the 2-minute tour ×

This problem is specific to Firefox as far as I can tell. (I'm using FF 4.0.1 on Win7 Ultimate.)

I have a page where I need to display a random background-image. I use a small php script (rotate.php) to do the trick. So my css basically reads as:

#main {background-image: url(bg/rotate.php);}

(I mention this because my guess is that Firefox gets somewhat confused by the fact that the image name doesn't changes, although the content of the image does.)

On top of that I have a small animation (made in javascript) in which a small dot falls from the top of the page. The animated element (containing this dot) goes through the #main element (and its random background-image).

The problem is about Firefox not updating the background-image correctly when refreshing the page.

It seems Firefox actually first displays the background-image from the previous page load, and only when the animation runs over this image does Firefox actually update the image, but it only updates the part covered by the animated element. So the result is a mix of both images (previous page load, current page load).

Only when resizing the window (e.g. by opening/closing Firebug) does Firefox entirely redraw the image (and finally displays the new image in whole).

You can see the problem in action here: http://www.terpsycordes.com/en/home (You may need to reload several times to get two different images in a row and see the problem, and you have to wait a few seconds for the animation to start.) (Once again this seem to be Firefox-only.)

Have you got any idea to avoid this ugly effect? Is there any trick to somehow force Firefox to redraw the image?

Thanks in advance.

Edit :

Thanks to the link provided by DavidJCobb, I tried various javascript tricks to force Firefox repainting the background-image. The result is still not entirely satisfactory, but it's better than before anyway. Here's what I found during my testing (hope this can help somebody):

  • changing the element (#main) opacity (even slightly) or giving it a transparent outline does force a redraw (and so the new image is displayed entirely);
  • changing the class of the element works too, if the applied class exists and affects some property of the element (e.g. outline);
  • however none of this work if set immediately on page load: I have to wait about 100ms before firing this events in order for the repaint to be effective.

So I still see the previous image during a brief moment before it is updated. If anybody has a tip on how to improve this, I'd be glad to hear it.

share|improve this question
The quickest non-specific way to get rid of it might be adding a random GET parameter to the URL: url(bg/rotate.php?12493402392049430) but it would still be very interesting to know why this happens –  Pekka 웃 May 22 '11 at 21:35
@Pekka: that's a good point, but in this case the url is in a CSS file, so it's a bit tricky to have anything dynamic in there. And that would mean preventing the browser from caching the stylesheet. –  s427 May 23 '11 at 17:59
add comment

1 Answer

but it only updates the part covered by the animated element

I'm guessing that you've encountered some kind of weird repaint bug in Firefox. Forcing Firefox to repaint the layout might help. Here's a method for forcing a redraw by altering the DOM.

share|improve this answer
Yes, that seems to be it, thanks for the link! The code given is for Prototype (I'm using jQuery), but I tried various suggestions found in the comments. The result is still not perfect, but better than before. I'm updating my question with more information. –  s427 May 23 '11 at 18:28
add comment

Your Answer


