Categorized: Browsers, JavaScript

Dealing with the IE 7 (and 8) Transparency Bug with jQuery

I found out this morning that you can’t use jQuery’s fadeIn or fadeOut in IE 7 or 8 on elements that have transparent pngs as backgrounds because the animation will make the transparency turn black. It’s a good thing browser detection is built into jQuery(!).

if ($.browser.msie && $.browser.version < 9 ) {
    $('#whatever').hide();
} else {
    $('#whatever').fadeOut();
}

Excellent.

Sources

Comments

David → May 22nd, 2009 at 3:14 am

I just worked out a solution to this problem. If you use AlphaImageLoader to load the PNG image then it will appear correctly. I noticed this because I use AlphaImageLoader for IE6 and my images were working fine in IE6.

David → May 22nd, 2009 at 3:24 am

I should point that i also use a container div like this:

<div id="logoCont">
    <div id="logo"></div>
</div>

I cant remember why but i think i did this because you cannot set the opacity of the div with the background image otherwise it disappears.

Dealing with the IE 7 (and 8) Transparency Bug with jQuery

Sources

Comments

What do you think about that?