title: jquery animation of marginLeft causes weird jump in Safari
body: <p>I built an image slider that uses jquery to create a "loop" of images. If you go to the right, the first image is prepended to the end. If you go to the left the last image is attended at the beginning. The margin-left-value is used to create a sliding look. It seems to work so far, but in Safari the animation of the margin doesnt work. It should use an easing function to ease between -100px und -200px. But there are values about 4000px.</p>
  
  <p>There are other people, who have those jumping problems in Safari, but I found no sollution.</p>
  
  <p>Here is the js:</p>
  
  <pre><code>window.onload = function ()
  {
  $inner = $('#wdgt_slider #inner');
  $active = $('#wdgt_slider').children().first();
  $slides = $('#wdgt_slider').children().length;
  
  $inner.prepend($inner.children().last()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft':'-100%'});
  
  $('#wdgt_slider').delegate('input[type=radio]', 'change', function()
  {
      if($(this).attr("checked") == "checked")
      {
          if( $(this).index() == ($inner.children().length-1) &amp;&amp; $active.index() == 0 )
          {
              prev();
          }
          else if( $(this).index() == 0 &amp;&amp; $active.index() == ($inner.children().length-1) )
          {
              next();
          }
          else if( $(this).index() &lt; $active.index() )
          {
              prev();
          }
          else if( $(this).index() &gt; $active.index() )
          {
              next();
          }
          $active = $(this);
      }
  });
  }
  
  function next()
  {
  $inner.animate({
      marginLeft:"-200%"
  },8000, $.easie(0.77, 0, 0.175, 1),function()
  {
      //$inner.append($inner.children().first()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft': "-100%"});
  });
  }
  
  function prev()
  {
  $inner.animate({
      marginLeft:"0"
  },8000, $.easie(0.77, 0, 0.175, 1), function()
  {
      $inner.prepend($inner.children().last()).css('marginLeft', '-100%');
  });
  }
  </code></pre>
  
  <p>I didn't make a fiddle, because the problem is more obvious inside the 960 grid system. Here is the link: <a href="http://www.goldentree.de/wordpress/" rel="nofollow">http://www.goldentree.de/wordpress/</a></p>