title: Resizable Div in Chrome Causes a Content Shift When Zoomed
body: <p>I am using the Jquery UI resizable plugin.  When a resize occurs I update another div with the appropriate offset to maintain its position.  This all works fine in Chrome when zoomed at 100%.  If I zoom to 90% sometimes the table within the second div shifts down below the first div.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="right"&gt;
          &lt;table&gt;&lt;tr&gt;&lt;td&gt;Blah&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Blah&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Blah&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;Blah&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(".left").resizable({
      resize: function ()
      {
          $(".right").css({marginLeft:$(this).width() + "px"});
      }
  });​
  </code></pre>
  
  <p>​
  CSS:</p>
  
  <pre><code>div
  {
    display:block
    position:absolute;
  }
  .left
  {
    width:99px; 
    height:500px;
    background-color:gray;   
    display:block;
    float:left;
    position:relative;
  }
  .right
  {
      margin-left:99px;
      background-color: blue;
      display:block;
      position:relative;
  }
  
  table
  {
      width:100%;
  }
  </code></pre>
  
  <p>My question is, how do I properly calculate the left margin for the .right div?        </p>
  
  <p>To reproduce the problem, zoom chrome to 90% and resize the left element in this fiddle: <a href="http://jsfiddle.net/johnkoer/FyE6f/45/" rel="nofollow">http://jsfiddle.net/johnkoer/FyE6f/45/</a></p>