two years agoUsing hasLayout to fix bugs in IE
Recently at work I came across a particularly tricky IE bug that I have seen a couple times now. I thought I would share the solution since it wasn't immediately obvious.
On the new Business in the community site (just launched by Torchbox) there is a timeline facility to show information about different events in Business, Politics and 'Business in the community' over time (Matthew did the awesome javascript that powers it).
The scrolling is controlled by animating the horizontal position relative value of the inner timeline div, the container window has
overflow: hidden. Whilst styling it, initially in quirks mode, the animation of the timeline div's worked just fine. IE behaved and respected the overflow on the container. However, in standards mode the overflow failed and the timeline divs were appearing outside of the container in both IE6 and 7, where of course other browsers were fine.
When debugged I realised that adding a position property fixed the issue, from this and from experience it was then apparent that the inner timeline was having its hasLayout property set to true in IE but the container was not.
The hasLayout property is Microsoft's way of identifying elements that form part of the structure of the page, it treats them differently and some crazy bugs can occur because of it. The solution was then to force the container to also set hasLayout property to true, so putting position:relative on the container made the overflow:hidden behave.
hasLayout is really annoying, it defaults to false unless (as found on the Microsoft site) an object has the properties height, display, float, position or width set (or also writingMode or zoom which are both proprietary Microsoft properties) however I would be careful believing entirely the 'remarks' section especially as it doesn't list position:relative as one of the triggers where as in fact it is.
In case you haven't come across it before now, other craziness that can occur from the hasLayout property includes some elements disappearing behind containers with background colours (again quite easily fixed by forcing the elements inside to have the hasLayout property as true)
hasLaylout also affects keyboard navigation in subtle ways as explained in this article.
4 comments
Comments are closed.
The other classic way to trigger hasLayout - if you can't relatively position an element, for whatever reason - is to give it a height.
Doesn't matter what height. Any height will do. I go for either 1% or 100%, but that'll give it layout, and make it behave. I've had lots of "exciting" bugs with background-images on list-items because of IE6's "layout" property.
As you note, the concept of "layout" remains in IE7, despite their tidy-up of browser bugs, so it's still a useful thing to be able to trigger.
Good stuff to have in one place, Nat!
tom 2nd December 2006 22:23
Sebastian 3rd December 2006 11:12
Már 3rd December 2006 12:29
Marty 5th December 2006 09:19