internet explorer - How can I get ride of a flicker in my skrollr animation in firefox and IE? -
i have 1 page animation using skrollr. animation looks fine in safari , chrome flickers in ie , ff. in firefox when scrolling , down through animation flickering goes away , animation smooth, ie flickers no matter what. animation has transform: translate3d(0px, 0px, 0px); , backface-visibility: hidden; force hardware acceleration , images preloaded. here link animation: http://total-equipment.com/products/coiled-tubing-unit/ , code structure:
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%; }
there few lines in firebug giving errors. example, line 438 looks this:
<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;">
whereas other lines around like:
<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;">
one has data-src
, other line error has src
.
Comments
Post a Comment