title: frameset do not resize correctly after resize by mouse
body: <p>I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.</p>
  
  <p>The code works but the problem is if I choose to resize frame with my mouse manually first and then press the minimize button it will resize incorrectly in IE8 and Chrome. It resize correctly in FF.</p>
  
  <p>I have this HTML structure</p>
  
  <pre><code>...
  &lt;frameset cols="32%,*" border="2" frameborder="1" framespacing="1"&gt;
      &lt;frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset"&gt;
          &lt;!-- The minimize button are in this frame searchResultFrame --&gt;
          &lt;frame name="searchResultFrame" scrolling="no" src="dummy"&gt;
          &lt;frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"&gt;&lt;/frameset&gt;
      &lt;frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3"&gt;
  &lt;/frameset&gt;
  ...
  </code></pre>
  
  <p>and this code that executes when pressing on the button.</p>
  
  <pre><code>// Minimize frame button
  $('.minimizeFrame').toggle(function () {
      parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
  }, function () {
      parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
  });
  </code></pre>
  
  <p>I can see that <code>cols="32%,*"</code> changes to <code>cols="22,*"</code> in the developer tools, but still it render in wrong size.</p>
  
  <p>Why do it resize incorrectly after changes by the mouse? Am I missing something or is it a bug in browser? Or are there maybe an alternative solution to resize the frame without this bug?</p>
  
  <p><strong>Example</strong></p>
  
  <p><a href="http://jsbin.com/ohihiy/2" rel="nofollow">http://jsbin.com/ohihiy/2</a></p>