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

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -