如何在 Firefox 和 IE 中的 skrollr 动画中消除闪烁？

Question

我有一个使用 skrollr 的单页动画。动画在 Safari 和 Chrome 中看起来不错，但在 IE 和 FF 中闪烁。在Firefox中，当在动画中上下滚动时，闪烁消失并且动画流畅，IE无论如何都会闪烁。动画有transform: translate3d(0px, 0px, 0px); 和背面可见性：隐藏；强制硬件加速并预加载所有图像。这是动画的链接：http://total-equipment.com/products/coiled-tubing-unit/ 这是代码结构：

HTML

<div class="container" id="arena"> 
            <div id="animate"
            data-anchor-target="#arena" 
>
                  <img class="lazy" data-anchor-target="#arena" src="img/animations/ctu_hq_animation_mb_4.0001.png" alt="" data-0-top="display:none;" data--100-top="display:block;" data--125-top="display:none;">
                  <img class="lazy" data-anchor-target="#arena" src="img/animations/ctu_hq_animation_mb_4.0003.png" alt="" data-0-top="display:none;" data--125-top="display:block;" data--150-top="display:none;">
                  <img class="lazy" data-anchor-target="#arena" src="img/animations/ctu_hq_animation_mb_4.0004.png" alt="" data-0-top="display:none;" data--150-top="display:block;" data--175-top="display:none;">
     </div>
</div>

CSS：

img {
    height: 500px;
    width: 800px;

}

#arena {
    position: relative;
    width: 1000px;
    height: 900px;
    background-size: 900px 800px;
}
#animate {
    width: 850px;
    height: 650px;
    position: fixed;
    background-size: 900px 800px;
    background-repeat: no-repeat;
    left: 10%;


}

Answer 1

firebug 中有几行出现错误。例如，第 438 行如下所示：

<img class="anim-image"data-anchor-target="#arena"  
src="http://total-equipment.com/wp-content/themes/teas/img/animations/ctu_hq_animation_mb_4.0010.png" alt="" 
data-0-top="display:none;" 
data--450-top="display:block;"  
data--500-top="display:none;">

而它周围的所有其他线条看起来像：

<img class="anim-image" data-smooth-scrolling="off" data-anchor-target="#arena" 
src="" data-src="http://total-equipment.com/wp-content/themes/teas/img/animations/ctu_hq_animation_mb_4.0009.png" alt="" 
data-0-top="display:none;" 
data--400-top="display:block;" 
data--450-top="display:none;">

一个有data-src，而另一行有错误只有src。