在Firefox中skrollr背景图像闪烁

Question

我有一个带有背景图像的div。使用skrollr，我改变了背景图像，获得了一种动画效果(纸飞机折叠)。为了防止插值，我使用了一个自定义的缓动函数：

easeInt: function(p) {
   return Math.floor(p * 13) / 13;
}

我的动画看起来像这样(skrollr-stylesheet)：

3528 {
    background-image[easeInt]: url("img/plane14/plane0.png");
}

3928 {
    background-image[easeInt]: url("img/plane14/plane13.png");
}

动画运行时，背景图像会在下一个图像出现之前消失一段时间，从而导致动画闪烁。这个问题只出现在Firefox中，不会出现在Chrome或Safari中。我正在使用预加载所有的图像

var img1 = new Image(); img1.src = 'img/plane14/plane1.png';

使用HTML预加载所有图像也做不到这项工作：

<div style="width:100px; height:100px; position: fixed; top: -100px; left: -100px;">
<!-- loading all images as <img src="imageurl.png"> -->
</div>

我还尝试使用skrollr的防止插值选项。我已经检查了我的缓解功能，它应该可以正常工作。在firebug中，我可以观察到背景图像正在根据需要进行更改。但我还是会有这种闪动。

Answer 1

我不熟悉Skrollr，但我一直在研究类似的情况，当图像被交换时，它们会闪烁。

我对这个问题的理解是，Firefox在第一次查看图像之前不会对其进行解码，而您看到的闪烁是在解码准备好之前尝试显示的图像。加载图像与解码是分开的，这就是为什么预加载对Firefox的这个问题没有影响。

如果你在Firefox中进入about:config，可以修改image.decode-mediately.enable的设置，这样就可以在本地修复这个问题了。不幸的是，我还没有找到更好的方法来解决这个问题。

我发现了几个我认为与这个问题相关的bugzilla案例：

https://bugzilla.mozilla.org/show_bug.cgi?id=1149893

https://bugzilla.mozilla.org/show_bug.cgi?id=1158440