在Firefox skrollr背景图像闪烁 [英] skrollr background image flicker in Firefox

问题描述

我有一个背景图片的div。使用skrollr，我改变的背景图像，获得某种动画（纸airplaine折叠起来）的。
以prevent插值，我使用自定义缓动函数：

I have a div with a background image. Using skrollr, I'm changing the background image, getting sort of an animation (paper airplaine folding up). to prevent interpolation, I use a custom easing function:

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

我的动画看起来像这样（skrollr样式表）：

My animation looks like this (skrollr-stylesheet):

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

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

在动画的运行，背景图片了一下消失出现在下单前，引起动画闪烁。这个问题只显示在Firefox，而不是在Chrome或Safari。我是$ P $使用ploading所有影像

When the animation's running, the background image disappears for a bit before the next one appears, causing the animation to flicker. This issue only shows up in Firefox, not in Chrome or Safari. I am preloading all the images using

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

preloading使用HTML没有做这项工作的所有图像之一：

Preloading all the images using HTML didn't do the job either:

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

我也使用skrollr的preventing插值选项尝试。
已经检查了我的缓动函数，它应该正常工作。在Firebug我可以观察到，根据需要正在发生变化的背景图片。尽管如此，我得到这个闪烁。

I also tried using skrollr's option of preventing interpolation. Already checked my easing function, it should work properly. In firebug I can observe that the background-image is being changed as desired. Still I get this flickering.

推荐答案

我不熟悉，但Skrollr我一直在寻找到类似的情况与图像闪烁时，他们已经交换了。

I am not familiar with Skrollr but I have been looking into a similar situation with images flickering when they have been swapped.

我对问题的理解是，Firefox不会去code图像，他们被看作是第一次，你所看到的闪烁，直到图像试图显示之前去code是准备。加载图像是分开的德code所以这就是为什么preloading在这个问题上对Firefox没有影响。

My understanding of the issue is that Firefox doesn't decode the images until they are viewed for the first time and the flicker you are seeing is the image trying to display before the decode is ready. Loading the image is separate to the decode so that is why preloading has no effect on this issue for Firefox.

如果你去一下：在Firefox其可能的配置更改设置image.de code-immediately.enabled，这应在本地解决问题。不幸的是我还没有找到更好的办法来解决这个问题。

If you go to about:config in Firefox its possible to change the setting image.decode-immediately.enabled and this should fix the issue locally. Unfortunately I haven't found a better way to solve this issue.

我发现了几个案例的Bugzilla我相信都涉及到这个问题：

I found several bugzilla cases I believe are related to this issue:

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

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

这篇关于在Firefox skrollr背景图像闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！