在Firefox中无法正确刷新的随机背景图片

Question

根据我的情况，此问题特定于Firefox。 （我在Win7旗舰版上使用FF 4.0.1。）

我有一个页面，我需要显示一个随机背景图像。我使用一个小型的PHP脚本（rotate.php）来完成这个任务。所以，我的CSS基本上是全文：

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

（我提到这一点，因为我的猜测是，火狐的事实，图像名不确实的变化变得有些困惑，虽然图像的内容做）

最重要的是，我有一个小的动画（用javascript制作），其中一个小点从页面顶部落下。动画元素（包含此点）通过#main元素（及其随机背景图像）。

问题在于Firefox在刷新页面时没有正确更新背景图片。

看来火狐实际上首先显示来自以前页面加载背景图像，只有当动画运行在该图片火狐实际更新图像，但只更新由动画元素覆盖的部分。所以结果是两个图像的组合（上一页加载，当前页面加载）。

只有在调整窗口大小（例如通过打开/关闭Firebug）后，Firefox才会完全重新绘制图像（并最终显示新图像）。

您可以在这里看到问题的实际情况：http://www.terpsycordes.com/en/home（您可能需要重新加载几次以获取连续两张不同的图像并查看问题，并且您必须等待几秒钟才能开始动画。） （再一次，这似乎只是Firefox。）

你有什么想法来避免这种丑陋的影响？有什么窍门强迫Firefox重绘图像？

在此先感谢。

---

编辑：

多亏了DavidJCobb提供的链接，我尝试了各种花样的javascript迫使火狐重新绘制背景图片。结果仍然不尽如人意，但总比以前好。这是我发现我的测试过程中（希望这可以帮助别人）：

• 改变元素（#main）不透明度（甚至略）或给它一个透明的轮廓并强制重绘（等新形象完全显示）;
• 更改元素的类别也可以，if应用的类别存在并影响元素的某些属性（例如outline）;
• 但是，如果在页面加载时立即设置，这项工作都不会发生：为了使重新绘制有效，我必须等待大约100毫秒才能开始此事件。

因此，我仍然可以在更新之前的短暂时间内看到上一张图像。如果有人对如何改善这一点有所建议，我很乐意听到它。

Answer 1

但只更新由动画元素

我猜你已经遇到了某种在Firefox奇怪的重绘错误的覆盖的部分。强制Firefox重新绘制布局可能会有所帮助。 Here's a method for forcing a redraw通过改变DOM。