Serious memory leak issue with 24-bit PNG images with alpha transparency in Internet Explorer

In my day job (i.e. the one paying the bills), I encountered a very serious problem in Internet Explorer, which turned out to be a show-stopper in my current project.

Basically, I’m working with a tool for editors where they can open up a sort of wizard/dialog on top of the regular document. In good modern fashion, this is naturally an overlay where the rest of document is dimmed out. The designer had created a sort of checkered background for the dimming, so I cut that image into a small 4 * 4 pixels wide 24-bit PNG image with alpha transparency (i.e. semi-transparent background, no matter what would be behind it). I then repeated that image as the background for the dialog.

We deployed it, it looked good and we went on with our lives. But gradually a number of reports came in that this page was dog slow to work with, you couldn’t even scroll and it would literally take seconds when you clicked a link before anything happened. Also, worth to note is that this only applied to Internet Explorer users (IE 7).

I really had no clue why this would be, because we were doing (or at least trying to do) all the right things with optimizing scripts, minimizing DOM access etc. Desperately thinking about what it could be, I remembered from before that transparency can make things slow, but never like this.

Just to see if it made any difference, I replaced the PNG image with a background color and opacity via CSS (and used the ridiculous code to get opacity in Internet Explorer). We deployed the code and awaited the news of any change.

Lo and behold, all performance problems were gone as if they had never existed! So, my word of warning to you is:

Be very very careful when you use 24-bit PNG images with alpha transparency in Internet Explorer, because apparently there is some serious memory leak issue/bug with it.

Posted in CSS,Developing,Technology,Web browsers |

Leave a Reply

Your email address will not be published. Required fields are marked *