3

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

enter image description here

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.

Dan Lugg
  • 20,192
  • 19
  • 110
  • 174

3 Answers3

2

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

kdub
  • 749
  • 2
  • 8
  • 19
  • Thanks **kdub**; I'm assuming also, that it's an IE problem, PNG rendering specifically. They were the last to adopt PNG alpha channel support, weren't they? – Dan Lugg Jun 23 '11 at 23:24
  • The browser is incapable of managing the compositing of the transparent PNG concurrently with any opacity effect on the image. In other words, for any given pixel, you either get alpha channel effects from the PNG itself, *or* from an opacity filter, but not both. – Pointy Jun 23 '11 at 23:35
1

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.

Mike Veigel
  • 3,795
  • 2
  • 20
  • 28
  • Thanks **NgM**; I doubt I could achieve better results with a GIF or 8-bit PNG, since the anti-aliased edges are what I'm going for. However, it's not *terrible* an eyesore, so I'll live with it. – Dan Lugg Jun 24 '11 at 02:01
1

Yeah, this is due to IE's poor PNG support.

One thing you can do to fix this is easily is that if the background behind the transparent png is a solid color, you can give the div element with the png image background-color attribute as well.

riku
  • 763
  • 4
  • 7