IE7 and "jaggies" around layered PNGs (with jQuery)

Question

I seem to be experiencing "jaggies" (jagged pixelation, black in this case) around PNG files, specifically with anti-aliased edges such as rounded borders (say, a large glossy button for example) in IE7. I think I've experienced this issue before, however it may not have been as obvious in a previous design.

Thing is, it only appears when I fade the PNG (and in this case, fade in another for a snazzy rollover effect) because initially, it appears fine.

Anyways, I'm not too certain where the issue stems from, however here is a brief dump of the involved code; hopefully there's a resolution.

Screen
Before and after respectively

jQuery

$(document).ready(function(){
    $('.mf_fader').hover(function(event){
        $('> *:first-child', $(this)).stop().fadeTo(450, 0);
        $('> *:last-child', $(this)).stop().fadeTo(350, 1);
    }, function(event){
        $('> *:first-child', $(this)).stop().fadeTo(350, 1);
        $('> *:last-child', $(this)).stop().fadeTo(450, 0);
    });
});

CSS

#dbc_main-letsgo,
#dbc_main-letsgo > div{
    width: 460px;
    height: 150px;
}

#dbc_main-letsgo > div{ background-image: url(../img/btn_main-letsgo-default.png); }
#dbc_main-letsgo > div + div{ background-image: url(../img/btn_main-letsgo-hover.png); }

.mf_fader{
    position: relative;
    display: inline-block;
}

.mf_fader > *{
    position: absolute;
}

.mf_fader > * + *{
    display: none;
}

HTML

<a href="#" id="dbc_main-letsgo" class="mf_fader">
    <div></div><div></div>
</a>

I'm assuming it's something to do with IE's poor PNG support, so maybe I'm stuck.

Answer 1

Every time I use opacity/fades etc on transparent PNG's in IE, i get exactly the same thing.

Also, I have visited many sites that have the same problem. It makes me feel better when I see people who boast being jquery experts have the same issue on their transparent pngs.

As far as I know it's an IE problem. If you find a way to animate opacity on Trans png's in IE without the black border...please post.

I have had to on a couple of occassions go from a fade effect to a show/hide effect

Answer 2

Sadly this has to do with IE 7's lame attempt at supporting PNGs. With the epic fail of 6, MS promised support in 7 and that somewhat fell through.

You can use a gif or an 8 bit PNG here though and get better results.

What I do is make a browser check for IE 7 and if I detect 7 I then switch to hide show as opposed to fades.

Hope that helps.