Firefox中的skrollr背景圖像閃爍

Question

我有一個帶背景圖像的div。 使用skrollr，我正在更改背景圖像，得到一種動畫效果（折疊紙張airplaine）。 為了防止插值，我使用了自定義緩動函數：

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

我的動畫如下所示（skrollr樣式表）：

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的選項來防止插值。 已經檢查了我的緩動功能，它應該可以正常工作。 在螢火蟲中，我可以觀察到背景圖像正在按需更改。 還是我忽隱忽現。

Answer 1

我對Skrollr並不熟悉，但是我一直在研究類似的情況，當交換它們時，圖像會閃爍。

我對此問題的理解是，Firefox不會在第一次查看圖像之前對其進行解碼，而您所看到的閃爍是試圖在解碼准備就緒之前顯示的圖像。 加載圖像與解碼是分開的，因此這就是為什么預加載對於Firefox在此問題上沒有影響的原因。

如果您在Firefox中轉到about：config，則可以更改設置image.decode-immediately.enabled，這應該可以在本地解決此問題。 不幸的是，我還沒有找到解決此問題的更好方法。

我發現了一些Bugzilla案例，我相信與該問題有關：

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