Google Chrome Extreme Lag With Slideshow

So I coded a jQuery slideshow for a clients website: http://dang-demo.squarespace.com If you browse the website using Google Chrome you'll notice extreme lag when trying to scroll down. jQuery Fading effect is very choppy, etc. I can't figure out for the life of me why this lag is taking place. If anyone can help that would be amazing!

FYI each photo in this slideshow is less then 300KB

here's the code:

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;
}

Solution

Seems box-shadow is the culprit.

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

If you create a div above your images with the box-shadow and just fade the images without shadows.

Chrome musn't like it once you start animating with complex shadows on an element.