Google Chrome Extreme Lag со слайд-шоу

Question

Итак, я закодировал слайд-шоу jQuery для веб-сайта клиентов: http://dang-demo.squarespace.com Если вы просматриваете веб-сайт с помощью Google Chrome, вы заметите чрезвычайную задержку при прокрутке вниз. Эффект затухания jQuery очень изменчив и т. д. Я не могу понять, почему это отставание происходит. Если кто-нибудь может помочь, это будет потрясающе!

FYI каждое фото в этом слайд-шоу является менее 300KB

вот код:

fade() 

function fade(){ 

    $('#intro div:not(:first)').hide(); 

    var index = 1; 
    var maxindex = $('#intro > div').length; 

    setInterval(function(){ 

    $('#intro > div:first').fadeTo(2500, 0).next().fadeTo(2500, 1).end().appendTo('#intro'); 

    $('.dot-controls span').removeClass('active'); 
    $('.dot-controls span:eq(' + index + ')').addClass('active'); 
    index = index < maxindex - 1 ? index + 1 : 0; 

    }, 5000); 

    for (var i = 0; i < maxindex; i++) { 
    $('.dot-controls').append('<span class="' + (i == 0 ? 'active' : '') + '">&middot;</span>'); 
    } 

} 

HTML:

<div id="intro"> 
    <div class="intro-bg-1"></div> 
    <div class="intro-bg-2"></div> 
    <div class="intro-bg-3"></div> 
</div> 

<div class="dot-navigation"> 
    <div class="dot-controls"></div> 
</div> 

CSS:

#intro { 
    background-color:#21201E; 
    background-position:initial initial; 
    background-repeat:initial initial; 
    height:100%; 
    left:0; 
    min-height:400px; 
    position:fixed; 
    top:0; 
    width:100%; 
} 

.fade { 
    display: none; 
} 

#intro .intro-bg-1 { 
    background-image:url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db1e4b0a5091d77c593/1418612145483/one.jpg); 
    background-position:50% 50%; 
    background-repeat:initial initial; 
    background-size:cover; 
    border:none; 
    bottom:0; 
    box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset; 
    left:0; 
    position:absolute; 
    right:0; 
    top:0; 
} 

#intro .intro-bg-2 { 
    background-image:url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db3e4b0a5091d77c598/1418612147944/two.jpg); 
    background-position:50% 50%; 
    background-repeat:initial initial; 
    background-size:cover; 
    border:none; 
    bottom:0; 
    box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset; 
    left:0; 
    position:absolute; 
    right:0; 
    top:0; 
} 

#intro .intro-bg-3 { 
    background-image: url(http://static.squarespace.com/static/547f68d5e4b030e48053f631/t/548e4db6e4b0a5091d77c5ad/1418612150110/three.jpg); 
    background-position: 50% 50%; 
    background-repeat:initial initial; 
    background-size: cover; 
    border: none; 
    bottom: 0; 
    box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset; 
    left:0; 
    position:absolute; 
    right:0; 
    top:0; 
} 

Answer 1

Кажется box-shadow является виновником.

box-shadow:rgba(0, 0, 0, 0.498039) 0 0 500px 0 inset; 

Если вы создаете div над вашими изображениями с тенью и просто исчезаете изображения без теней.

Хром не нравится, когда вы начинаете анимацию со сложными тенями на элементе.