title: Image reveal using JQuery and css background-position: jitters (except firefox) + percentage conundrum
body: <p>I'm doing a JQuery animated menu thing. This is just the parts of the code pertaining to my question. </p>
  
  <p>I have a bunch of divs that are animated (using JQuery) so they expand sideways, left and right. In the div I use a background image, and when the div expands and contracts I want to keep the image positioned so it doesn't move. </p>
  
  <p>Here's a (working) self-contained complete example, save this as an .html to try it. (Can you attach this in stackoverflow somehow?)</p>
  
  <p><a href="http://jsbin.com/eyojah" rel="nofollow">http://jsbin.com/eyojah</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;JQuery Jitter Bug&lt;/title&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body { background: #0f1923; margin:0px; padding:0px;}
              div#logo {
                  border: 0px;
                  margin: 0px;
                  padding: 0px;
                  background-image: url("http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"); 
                  background-position:20%; 
                  position: absolute;
                  height: 53px;
                  left: 100px;
                  width: 100px;
                  top: 50px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="logo"&gt;&lt;/div&gt;
          &lt;script&gt;
              $('div#logo').mouseenter(function(){$(this).animate( {left: "0px", width: "600px"}, 1000); }); /* show */
              $('div#logo').mouseleave(function(){$(this).animate( {left: "100px", width: "100px"}, 1000); });  /* crop */
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Two questions for you: </p>
  
  <p>1) How is that background-position percentage calculated? Trial and error shows that 20% is correct here. The div is left=0, width=600 pixels when expanded, and left=100, width=100 when collapsed. How does that become 20%? Shouldn't it be the left edge of the collapsed size (100/600 = 16.666%?) Apparently not, but why not?</p>
  
  <p>2) This looks just peachy in Firefox, but in Safari and Chrome (I'm on OSX) the image shakes when the animation is going on. Any idea on how to fix that so it looks better in other browsers? </p>