谷歌浏览器极端滞后与幻灯片

Question

所以我为客户网站编写了一个jQuery幻灯片： http://dang-demo.squarespace.com 如果您使用谷歌浏览器浏览网站，您会在尝试向下滚动时注意到极度延迟。 jQuery淡入淡出效果非常断断续续等。我一辈子都想不通为什么会发生这种滞后。如果有人能帮忙，那就太棒了！

仅供参考，此幻灯片中的每张照片小于 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，并且只是淡入淡出没有阴影的图像。

一旦你开始在元素上使用复杂的阴影制作动画，Chrome 就不喜欢它了。