milliAmp

I spent a huge part of today trying to determine the cause of a major Internet Explorer performance and rendering regression in a Web Application I'm developing. The reason it was such a bitch to find was because so much code had changed since the last time I had done a proper test in IE6. This was in code which I didn't expect to cause rendering issues, performance issues maybe, but those could have been dealt with.

So, I went through carefully ripping apart the project, disabling stylesheets, removing images, removing individual styles to figure out what was going on. About a hour later I hadn't got very far. I had determined that every¹ browser was fine except IE6.

In frustration, I turned to Google. Trying to find pages describing huge black areas rendering over the page while using Scriptaculous Sortables got my nowhere so I tried searching for causes of huge black rendering artefacts in IE in general... nothing.

I turn back to trying to make a minimal test case. I ended up removing an image that was inside each Sortable item and suddenly the rendering problem went away and the performance jumped up significantly. Anyway, some dilly-dallying around and it turns out it was the javascript I'd written causing problems at all. It was the IE6 CSS Alpha PNG hack which was causing all the problems (which was working fine without performance issues the last time I tested this site in IE6).

It is indeed common knowledge among web developers that IE6 does not support transparency on 24-bit+Alpha PNG images. The alpha channel is rendered [usually] in a baby blue colour instead of being see-through.

To remedy this I was using the fastest hack around the issue that I have found and it involves pasting 5 lines in the CSS file for a site and bingo. I didn't make this hack but here's how it works. It uses the proprietary filter CSS attribute combined with the DirectX ActiveX control to draw the PNG, to target only PNGs and the also proprietary CSS extension 'expression' which uses JScript to compute values. I haven't had a problem with this hack yet, it doesn't handle CSS background images but I haven't needed it to yet.

This combined with the addition of a PNG on each individual Sortable Item caused the poor DirectX Transform to basically crap itself and render parts of the window black. Very black.

Blah.

What a waste of many hours of my day.

Honestly though, this rendering bug caused a few 'wow' moments from people in my office when they saw what IE was displaying on the screen and how it took roughly 20 seconds and 100% CPU to drag one single item between two lists. I'll have a screen-shot of this up in the next few days.