-
Using 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
hasLayoutproperty 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 sethasLayoutproperty to true, so putting position:relative on the container made theoverflow:hiddenbehave.hasLayoutis 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 listposition:relativeas 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
hasLayoutproperty includes some elements disappearing behind containers with background colours (again quite easily fixed by forcing the elements inside to have thehasLayoutproperty as true)hasLayloutalso affects keyboard navigation in subtle ways as explained in this article.
Subscribe
