December 2nd, 2006

Slow Rendering in Internet Explorer with HasLayout enabled

Posted by jeremy2 in Browser Bugs

There is a feature called “haslayout” in IE that often drives web developers insane - mostly because many are not aware of this so-called feature. If you want more information on this, I suggest you search Google for the term “haslayout” - you will get a wealth of information on it and so I will not elaborate on this here. This article will deal with a bug/annoyance with IE 6 in which JavaScript resizing goes very slow inside a container that has haslayout enabled.

I am currently working on a project in which it is necessary to have a minimize/maximize function for DIVs as there is a lot of information on the screen and it is helpful to only have the headers visible until the user decides that he wants to access the options below the headers. I made a function to make the minimize/maximize function more fluid (with the DIV being resized in increments) rather than an all-at-once surprise. It works fine in every browser by itself, but I had to give the containing element “layout” in order for floats to work properly in Internet Explorer. If you don’t know what I’m talking about, do that Google search at the top. I did this by using position: relative in the style for the containing div, but I also tried using other “haslayout” methods like zoom: 1 with the same results. Any time the containing element had the “haslayout” property enabled, the rendering was about twice as slow as before. IE 7 does just fine with it, but IE 6 has the problems. I have not been able to test for older versions of Internet Explorer yet, but it is driving me nuts have to work around garbage like this. In futility, I decided to put a warning up on the login page if a user is using IE6 to upgrade to 7 or get a better browser like Firefox.