Saturday, July 21, 2012

Yet Another IE Reflow Workaround {PEN003}

IE6-7 will often forget to reflow elements if you give them position:relative or position:absolute and you're updating the DOM of that area. This means your positioned elements disappear, but with a tool like IE Web Developer, they show up immediately after a change is made to the CSS. I've seen lots of different solutions to this on the Internet and most of the time, I have worked around this problem by removing positioning on the elements. For those times when you can't, there's this:

#offendingElement
{
     *z-index: expression(1);
     *z-index: auto;
}

Triggers reflow! If overflow:hidden on the container, <div></div> before the positioned element and the various other tricks on the Internet haven't worked for you, try this. I'm not sure exactly what's happening, but I imagine it's something similar to me toggling a value using IE Web Developer. It seems declaring a CSS expression is enough for IE to evaluate it and render that element with known attributes up to that point, then after that, IE evaluates the regular property as a change, triggering reflow.

The above works if you're simply adding/removing nodes from the DOM. If you're using hover effects, you might want to try something like this:

#offendingElement
{
     *z-index: expression(_ = +new Date() % 2);
}

Same principle, but IE is evaluating it constantly, so it'll reflow when you hover over it. Note: Might kill performance.