frameset do not resize correctly after resize by mouse

Question

I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.

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.

I have this HTML structure

...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
    <frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
        <!-- The minimize button are in this frame searchResultFrame -->
        <frame name="searchResultFrame" scrolling="no" src="dummy">
        <frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
    <frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...

and this code that executes when pressing on the button.

// Minimize frame button
$('.minimizeFrame').toggle(function () {
    parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
    parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});

I can see that cols="32%,*" changes to cols="22,*" in the developer tools, but still it render in wrong size.

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?

Example

http://jsbin.com/ohihiy/2

Answer 1

Looks like it's this bug in Webkit that has been ignored since 2010:

https://bugs.webkit.org/show_bug.cgi?id=36584

Answer 2

This worked for me. I created a function that "resets" cols and "later" sets correct widths. It seems there must be a timeout after reset or a kind of loop that "touches" child frames

function init_page() {
  function setCols(frms, cols) {
    // for some magic reason we have to 1st -> reset current cols 
    frms.setAttribute('cols', '');
    // and 2nd ask about child width (it's now clientWidth)
    for (var i = 0; i < frms.children.length; ++i) {
      if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
      }
    }
    frms.setAttribute('cols', cols);
  }
  // Minimize frame button
  $('#minimizeButton')
    .toggle(function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
    },
    function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
    });
}