title: slider function not running as desired in safari as it does in chrome/firefox
body: <p>I have a <code>slider</code> function that automatically runs through a group of list items.<br/> In <strong>Chrome</strong> and <strong>Firefox</strong>, the resting image is the first one after the automatic rotation. <br/> Unfortunately, in <strong>Safari and IE</strong>, it rests on the last image. I thought this might have been a style issue but I'm not using any styles that would cause this. I also thought maybe <code>setInterval()</code> or <code>setTimeout()</code> was causing the inconsistency. I'm not able to lock down what is the cause. </p>
  
  <pre><code>$(function ($) {
  
      var slideCount = $('#slider ul li').length;
      var slideWidth = $('#slider ul li').width();
      var slideHeight = $('#slider ul li').height();
      var sliderUlWidth = slideCount * slideWidth;
  
      $('#slider').css({ width: slideWidth, height: slideHeight });
  
      $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
  
      $('#slider ul li:last-child').prependTo('#slider ul');
  
      function moveLeft() {
          $('#slider ul').animate({
              left: + slideWidth
          }, 800, function () {
              $('#slider ul li:last-child').prependTo('#slider ul');
              $('#slider ul').css('left', '');
          });
      };
  
      function moveRight() {
          $('#slider ul').animate({
              left: - slideWidth
          }, 800, function () {
              $('#slider ul li:first-child').appendTo('#slider ul');
              $('#slider ul').css('left', '');
          });
      };
  
      $('.sa-left').click(function () {
          moveLeft();
          clearInterval(auto);
      });
  
      $('.sa-right').click(function () {
          moveRight();
          clearInterval(auto);
      });
  
  
      var auto = setInterval(moveRight, 1000);
  
      var stopOnSlide =  slideCount*1000+1000; 
  
      window.setTimeout(function(){
          clearInterval(auto);
  
          $( '.sa-left , .sa-right' ).delay(1000).fadeIn('slow');
  
      }, stopOnSlide);  
  });
  </code></pre>
  
  <p>What am I missing here? I've researched this specific issue and haven't found a clue as to what this issue might be.</p>
  
  <pre><code>    &lt;div id="container"&gt;
  
          &lt;div id="sliderContainer"&gt;
              &lt;div id="slider"&gt;
                  &lt;div class="slider-arrow sa-left"&gt;&lt;img src='arrowLeft.png'/&gt;&lt;/div&gt;
                  &lt;div class="slider-arrow sa-right"&gt;&lt;img src='arrowRight.png'/&gt;&lt;/div&gt;
                  &lt;ul&gt;
                    &lt;li id='toggle1'&gt;&lt;img src="t1.png"&gt;&lt;/li&gt;
                    &lt;li id='toggle2'&gt;&lt;img src="t2.png"&gt;&lt;/li&gt;
                    &lt;li id='toggle3'&gt;&lt;img src="t3.png"&gt;&lt;/li&gt;
                  &lt;/ul&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="//html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- crucial scripts --&gt;
      &lt;script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  
      /&lt;!-- plugin scripts --&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- custom scripts --&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  </code></pre>