jQuery parallax lags in Chrome 및 Safari

Question

내 시차 효과는 파이어 폭스에서 잘 작동하지만 크롬 및 사파리에서는 잘 작동하지 않습니다. 내 페이지의 구조를 나타내는 jsfiddle.net/n5kjK/1/입니다.

article{ 
    width:100%; 
    text-align:justify; 
} 
.thumbnail-container{ 
    position: relative; 
    height: 350px; 
    overflow: hidden; 
} 

.thumbnail-container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
} 

경우 문제는

내 HTML

<article> 
    <div class="thumbnail-container"> 
     <img src="http://placehold.it/300x200&text=thumbnail"/> 
    </div> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis. 
</article> 
<article> 
    <div class="thumbnail-container"> 
     <img src="http://placehold.it/300x200&text=thumbnail"/> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis. 
</article> 
<article> 
    <div class="thumbnail-container"> 
     <img src="http://placehold.it/300x200&text=thumbnail"/> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis. 
</article> 
<article> 
    <div class="thumbnail-container"> 
     <img src="http://placehold.it/300x200&text=thumbnail"/> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis. 
</article> 
<article> 
    <div class="thumbnail-container"> 
     <img src="http://placehold.it/300x200&text=thumbnail"/> 
    </div> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis. 
</article> 

내 JS

$(function(){ 
    $(window).on('scroll', function(e) { 
     $('.ciao').html("ciao"); 
     var windowScrollTop=$(this).scrollTop(); 
     parallax(windowScrollTop);  
    }); 
}); 

function parallax(windowScrollTop) { 
    $('.thumbnail-container img').each(function(index){ 
    var dif=windowScrollTop-$(this).parent().position().top; 
     var scrollSlow = dif *(0.5); 
     if(dif>=0) 
      $(this).css('top', (scrollSlow) + 'px'); 
    }); 
} 

내 CSS입니까?

감사합니다.

Answer 1

문제는 마우스 스크롤이 부드럽지 않다는 것입니다. Use this plugin은 기본 마우스 스크롤을 무시합니다.