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 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.
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

以上就是random background-image not refreshing correctly in Firefox的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准