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

Question

据我所知，这个问题是 Firefox 特有的。 （我在 Win7 Ultimate 上使用 FF 4.0.1。）

我有一个页面需要显示随机背景图像。我使用一个小的 php 脚本 (rotate.php) 来解决这个问题。所以我的 css 基本上是这样写的：

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

（我之所以提到这一点，是因为我的猜测是 Firefox 对图像 name 不会改变这一事实感到有些困惑，尽管图像的 content 会改变。 )

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

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

似乎 Firefox 实际上首先显示 上一个页面加载的背景图像，并且只有当动画在此图像上运行时，Firefox 才会真正更新图像，但它只更新被动画元素覆盖的部分。所以结果是两个图像的混合（上一个页面加载，当前页面加载）。

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

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

你有什么办法可以避免这种丑陋的影响吗？有什么技巧可以强制 Firefox 重绘图像吗？

提前致谢。

---

编辑：

感谢 DavidJCobb 提供的链接，我尝试了各种 javascript 技巧来强制 Firefox 重新绘制背景图像。结果仍然不完全令人满意，但无论如何都比以前好。这是我在测试期间发现的（希望这可以帮助某人）：

• 更改元素 (#main) 的不透明度（即使是轻微的）或给它一个透明的轮廓确实会强制重绘（因此新图像会完全显示）；
• 更改元素的类也可以，如果应用的类存在并影响元素的某些属性（例如轮廓）；
• 但是，如果在页面加载时立即设置，这些都不起作用：我必须等待大约 100 毫秒才能触发此事件才能使重绘生效。

所以在更新之前的一小段时间里，我仍然可以看到之前的图像。如果有人对如何改进这一点有任何建议，我会很高兴听到它。

Answer 1

但它只更新动画元素覆盖的部分

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