IE6: AlphaImageLoader rendering problem when 3D acceleration available
If you ever had the pain to code Web designs with the goal to support IE6, you will know the AlphaImageLoader workaround to “emulate” transparent PNGs. Of course, this workaround brings new problems, for instance the problem that links are not clickable when positioned over a AlphaImageLoader PNG. This can be fixed with position: relative.
You won’t believe it …
However, I discovered a fairly new problem that surprised even me: there’s a bug with ImageAlphaLoader that hides part of Web pages when and only when 3D hardware acceleration is available. You can test this with 2 environments:
- A Windows XP installation without hardware graphics acceleration available. For instance, use a normal virtual machine (VirtualBox).
- A Windows XP installation with acceleration available. For instance, use a native WinXP installation with ATI/Nvidia drivers or VirtualBox with the experimental 3D acceleration support.
Sample
I can’t post the full HTML/CSS code because it involves images that don’t belong to me (that’s the reason why the screenshots are blurred) and I don’t want to invest the time and make a proof-of-concept file only for a stupid IE bug. But I have made two screenshots:
- Loaded the page in IE6
- Maximized
- Restored => display bug in action (see screenshot 1)
The second screenshot shows the correctly rendered page using the workaround below:
My workaround
I had the idea to force a redraw by using something like * { zoom: 1; } in the IE6 stylesheet, and to my surprise, it seemed to work.