random background-image not refreshing correctly in Firefox

This problem is specific to Firefox as far as I can tell. (I'm using FF 4.0.1 on W开发者_开发百科in7 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.

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.