Home/ Questions/Q 6061915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T08:59:29+00:00

I seem to be experiencing jaggies ( jagged pixelation, black in this case )

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0