Question

我使用skrollr进行单页动画。动画在Safari和Chrome中看起来很不错，但在IE和FF中闪烁。在firefox中通过动画向上和向下滚动时，闪烁消失，动画流畅，IE无论如何都会闪烁。动画有变换：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

萤火虫中有几行出错。例如，第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。

如何在firefox和IE中的skrollr动画中获取闪烁？

1 个答案: