So it turns out that there are actually a number of problems with the solution I've proposed in this blog entry. It seems to work for my sample page, but when put to the test in a real world scenerio, it failed miserably.
An updated solution has been posted: Beating the IE Resize Bug (revisited).
And you can see this updated solution in action here.
There is a bug (at least I consider it a bug) in IE (versions 6 and 7) in which the clarity between
body.onresize is muddied. This can cause quite a problem for developers and even render the client's browser unresponsive (throttling the CPU to near 100%) if you're not very careful.
I've discussed this with numerous members of the IE development team, and I was able to gain some valuable insight. The general feeling was that this behavior is by design. It may be (and I can understand the motivation to do this), but I'm still not so sure I agree with it (it just doesn't feel logical to me).
After quite a bit of back-and-forth, I finally got in touch with one developer who seemed to think that this is the wrong behavior (in strict mode). Personally, I feel that this behavior is undesirable in either strict mode or transitional, but I guess just having the issue acknowledged is a good start.
The problem remains though, because this bug affects developers today, and it won't be addressed for quite some time (if I'm not mistaken, the official IE7 release is not going to address it).
So in this blog entry, my goal is to introduce a work-around that I've come up with for dealing with this issue.
Read on to learn more.
First, let me demonstrate the bug:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>IE Resize Bug</title>
window.onresize = function()
alert('The browser window was resized… or was it?');
var p = document.createElement('p');
p.appendChild(document.createTextNode('I am a paragraph!'));
<style type = "text/css">
border: 3px solid red;
<body onload = "init();">
<button id = "btnGrow" onclick = "grow();">Grow</button>
If you save the above code sample and run it in IE, you'll see that IE thinks it's logical to fire the window's resize event every time the
grow() function execute. Why? Because the
<body> element was resized to accomodate the newly added
<p> tag, and IE fails to make any distinction between the window (or viewport) and the
Contrast this with Firefox, which correctly understands that the window size has not changed, and therefore, the resize event should not fire. Seems like a no-brainer if you ask me.
So how do you make IE fire the resize event only when it should fire the resize event? Unfortunately, you can't.
The only solution I've been able to come up with is to forget the built-in resize event completely and write some custom code to manage it instead.
One of the IE developers suggested a work-around which involved monitoring the placement of a fixed-positioned
<div> element. I like this approach (a lot actually), but it's usefulness is limited since IE6 doesn't support CSS fixed positioning.
To see the solution I've developed, goto part 2.
Pages: 1 2