Question

I have a jquery toggle that animates and displays a DIV. I have a transparent PNG, drop shadow type background image, and when it first appears, I see a black background then it disappears once the image loads…

is there a way around that? is that a bug? I have it animating slow, so maybe that has something to do with it.

should I just make it show()?

Answer 1

This is a bug in IE.

No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don’t work orrectly with transparent PNGs.

To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:

if ($.browser.msie)
    $(something).css({
        background: 'none',
        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
    });

(This code works; I’m using it right now)