title: Odd "shaking" effect when animating width with jQuery (only in Chrome!)
body: <p>I'm animating the width of a <code>li</code> element using jQuery in a simple snippet of code. I'm using <code>hover()</code> as the handler and <code>.animate()</code> to animate the width. Here is my code. </p>
  
  <pre><code>$('li').each(function() {
      //store the original width of the element in a variable
      var oldWidth = $(this).width();
      $(this).hover(
          function() {
              //when the mouse enters the element, animate width to 900px
              $(this).animate({width: '900px'}, 600, 'linear')
          },
      function() {
              //when the mouse leaves, animate back to the original width
              $(this).animate({width: oldWidth}, 350, 'linear')
          }
     );
  }); 
  </code></pre>
  
  <p>The code is really really simple and works <strong>but</strong> with one very odd quirk in Chrome. When animating the elements in and out, the <code>li</code> elements "shake" as if they're really cold and were shivering. You can see the behavior here in a live example: <a href="http://missmd.org/" rel="nofollow">http://missmd.org/</a> (edit: bug is now fixed)</p>
  
  <p>I've animated a bunch of stuff before with jQuery and never seen this behavior. Is there any explanation for why it occurs and how I can get around it? I'm wondering if it's because I've floated the elements to the right and am animating to the left. The bug is maddening and detracts from the overall presentation a lot (at least to me). Anyone else seen this before?</p>
  
  <p><strong>Edit to clarify:</strong> it's not the actual <code>li</code> element that "shivers" it's the text within it that shakes slightly but noticeably from left to right very quickly as the animation runs. I'm stumped.</p>
  
  <p><strong>Edit two:</strong> after fiddling with the CSS a bit now I can only reproduce the effect in <strong>Chrome</strong> (21.0.1180.60 beta-m for me). In Firefox it works as intended. It also works great in IE. Very ironic that Chrome (usually great with this stuff) is giving me trouble now. <em>Pulls hair out, checks sanity</em></p>
  
  <p>Here is my HTML to help get to the bottom of this. We have reproduced the problem in ChrisFrancis' jsFiddle. </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul class="nav"&gt;
          &lt;li class="one"&gt;
              &lt;a href="homeandnews/"&gt;
                  &lt;span class="title"&gt;Home and News&lt;/span&gt;
                  &lt;br/&gt;
                  &lt;span class="subtitle"&gt;Learn more about me and read general updates!&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;nav&gt;
  </code></pre>
  
  <p>I'm completely stumped. This could also be a bug in Chrome/V8 JS engine and there's nothing we can do about it. </p>