title: Unintended shaking effect while applying jQuery animate with chrome
body: <p>I'm using the below code to create a full width full height website with sliding background images. it's all working fine with Firefox and IE but on Chrome and Safari the background is shaking during the animation. I also noticed the speed of the animation increasing overtime (not the actual var but it just seems to move faster after a while) any ideas on how to fix it or maybe a new solution to avoid animate() completely?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
      //settings for slider
      var width = '100%';
      console.log(width)
      var animationSpeed = 2000;
      var pause = 5000;
      var currentSlide = 1;
  
      //cache DOM elements
      var $slider = $('#slider');
      var $slideContainer = $('.slides', $slider);
      var $slides = $('.slide', $slider);
  
      var interval;
  
      function startSlider() {
          interval = setInterval(function() {
              $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
                  if (++currentSlide === $slides.length) {
                      currentSlide = 1;
                      $slideContainer.css('margin-left', 0);
                  }
              });
          }, pause);
      }
      function pauseSlider() {
          clearInterval(interval);
      }
  
      $slideContainer
          .on('mouseenter', pauseSlider)
          .on('mouseleave', startSlider);
  
      startSlider();
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body {
   background-color:black;
   height: 100%;
   margin: 0px;
   padding: 0px;
  }
  
  .container {
   width: 100%;
   min-height: 100%;
   height: 100%;
   padding: 0;
  }
  
  .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.row {
   padding: 0;
  }
  .header {
   background-color: white;
   height: 85px;
  }
  
  #slider {
      width: 100%;
      height: calc(100% - 250px);
      overflow: hidden;
  }
  
  #slider .slides {
      display: block;
      width: 600%;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  #slider .slide {
      float: right;
      list-style-type: none;
      width: 16.666666667%;
      height: 100%;
  }
  
  .footer {
   color: white;
   height: 165px;
      padding: 72px 0  0 470px;
  }
  
  .slide1 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
  .slide2 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
  .slide3 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
  .slide4 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
  .slide5 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="header"&gt;
              &lt;img class="logo" src="http://placehold.it/156x33"&gt;
          &lt;/div&gt;
          &lt;h1&gt;Proin bibendum ligula massa nec maximus.&lt;/h1&gt;
          &lt;div id="slider"&gt;
              &lt;ul class="slides"&gt;
                  &lt;li class="slide slide1"&gt;&lt;/li&gt;
                  &lt;li class="slide slide2"&gt;&lt;/li&gt;
                  &lt;li class="slide slide3"&gt;&lt;/li&gt;
                  &lt;li class="slide slide4"&gt;&lt;/li&gt;
                  &lt;li class="slide slide5"&gt;&lt;/li&gt;
                  &lt;li class="slide slide1"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="footer"&gt;
              &lt;div&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Lorem ipsum dolor sit&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>