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

Question

据我所知，这个问题是 Firefox 特有的。 (我在 Win7 旗舰版上使用 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

but it only updates the part covered by the animated element

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