window.onresize hangs IE6 and IE7

Another bug that I’ve not seen before that caused some confusion. Actually, the bug almost makes sense, except that it leaves IE6 and IE7 completely hanging.

Details of the Bug

You’ve hooked an onresize event and there’s some, supposedly, innocuous code in the handler. Upon resizing, resizing works fine in all browsers, except IE. IE will result in a total hang, that will probably require you to kill the running process.

Demo

I’ve created demo, designed to show you how to prevent the bug from executing and then allowing you to create the scenario that causes the hang.

View the IE onresize hang demo

Upon loading the demo, it’s designed not to hang. If you remove the ‘limiter’ in IE it should hang the browser. If you remove the limiter, and enable the container, you should find it doesn’t hang.

The Scenario

This bug only occurs when the resize handler (or any functions called from the handler) create new lines of content in the browser. It will happily add content horizontally, but vertically causes a hang.

Why?

Basically it’s a daft infinite loop.

In IE, the JavaScript is doing this:

  1. Hook onresize
  2. Resize event triggered
  3. Run the handler
  4. Handler increases the height of the content (not the window, but remember, this is IE)
  5. Since the window’s content height has increased, it triggers a resize event – go to 3…and so we have our infinite loop

This is why either capping the resize firing or putting the changing content in a fixed height container doesn’t cause the error to occur.

Firefox handles this issue by firing the resize event once the resize has completed. Safari fires throughout the resize, but doesn’t hang.

There is an IE specific onresizeend event, but I couldn’t get it to work – I tried setting the event via JS, via VBScript (I had to wash TextMate afterwards it felt so dirty writing VBScript!) and I tried an event specific script tag (as per Microsoft’s MSDN page). I would have expected this would get around the issue.

I wonder if any of the JavaScript geniuses might be able to find a solution :-)

8 Responses to “window.onresize hangs IE6 and IE7”

  1. In the function handling what to do when the resize happens, I usually compare it to the previous value. If it hasn’t changed, I take no action.

  2. @Robert aye, but if the dimensions have changed, and you take action, and the action results in a change of height – the resize triggers again and the dimensions would be different from your previous stored values, then we’re in our infinite loop again (…I think).

    One solution we tried out to get around it, was to wrap the contents of the handler in a setTimeout(fn, 10). I didn’t solve the infinite loop, but it didn’t hang the browser either. It would fire off the infinite loop, and we would watch the browser very slowly run out of resources.

  3. Thanks for this – I recently implemented a function to resize a window to 100% of the window or document size using jQuery’s bind method, and the effect works in IE7 but not in IE6.

    Do you think there could be something written in the jQuery event handler method for ‘onresize’ that gets round the problem for 7, but not 6?

    M.

  4. Ooops, I meant ‘resize an element to 100% of the window or document height’…

  5. patch:

    window.onresize = null;
    window.onresize = arguments.callee;

  6. Found a solution deactivating the event processing while doing the resizing stuff and activating afterwards:

    
    function resize_viewport() {
      $.event.remove( this, "resize", resize_viewport);
    
      // do what you need to do	
      $.event.add( this, "resize", resize_viewport);
    }
    
    // and in the document ready event
    
    //Initial resizing
    resize_viewport();
    
    // Bind resize event to the window
    $(window).resize(resize_viewport())
    
  7. @miquel – that looks like it would do the trick – but you don’t need the final bind call – since the function you’ve got autobinds.

  8. @Miquel XLNT, that was exactly what I needed.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight