Fading a 24-bit transparent PNG in IE7

Posted by Dan on Feb 17, 2009 @ 4:03 PM

Internet Explorer 7 has some issues with fading transparent PNGs. If you've gotten to the this page because you're seeing a black border where the transparent edges in your PNG are, then here are some tips for fixing the problem:

  1. Do not fade the element directly, but fade a parent container holding the PNG. This may mean you need to add a wrapper element to your code.
  2. Give the parent element a background color.
  3. Lastly, if you're still having problems, try give your parent element the old "zoom: 1" trick. Give the parent element a style declaration of "zoom: 1" (either via CSS or an inline style.) This will force IE to give the element hasLayout—which tends to fix all sorts of weird display issues in IE7.

The above tips will usually sort out any fading issues I'm having in IE7.

Categories: HTML/ColdFusion, jQuery

27 Comments

  • Daren's Gravatar
    Daren
    Dan,

    I found this blog entry when googling IE7 PNG issues.
    I addressed this issue in the following post on a different site: http://forum.briask.com/viewtopic.php?f=3&t=12... . The pictures I posted are indicative of the problem you describe as well. At least, that's what i think. Since I have already placed a semi-transparent shadow on the text in the PNG, do you think the zoom:1 fix would work?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Daren:

    Other some slight interlacing artifacts when fading in/out the images in the center banner directly under the navigation, I'm not noticing any real differences between Firefox 3 and IE7. And the interlacing that is there I think more an issue with the images themselves and not so much with IE7.
  • Daren's Gravatar
    Daren
    Hi Dan ! On this site ( http://forum.briask.com/viewtopic.php?f=3&t=12... ), I posted a picture of the problem. I highlighted the problem with red circles. The forum uses iframes so you'll have to scroll down or click the image to see what I'm referring to.

    I did try applying the zoom: 1 to the div container but that didn't seem to work. Another site made reference to your comment as well ( http://www.optimalworks.net/blog/2008/web-developm... ). But, again, I think they're referring to applying filters to the whole image where I just want the semi-transparent shadows of the text to come through clean.

    The site I intend to use it on ( w-p.biz/milestones ) is not running the module yet because of this problem. I appreciate your response.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Daren:

    The problem you're showing in the screenshot is definitely along the lines of the issue I've seen in, but in IE7 I've only seen the issue when I've specifically set the opacity to something other than 100% (like when fading in/out an image.)

    Did you try giving the parent element a specific background color?
  • Daren's Gravatar
    Daren
    Hey Dan,

    Thanks for the answers. I know you're busy with other things.
    No, I have not tried background color changes since I use a background image. With images this simple, would it be better to just use a transparent GIF?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Daren:

    You could use an 8-bit PNG as well--it's only 24-bit PNGs that have the issue.

    My guess is if you just gave the parent DIV a background (setting a specific background image might work--I've only tried specifying a color) the problem would go away. I'd try setting it to a solid color first--just to see if that works.
  • Daren's Gravatar
    Daren
    You're awesome, Dan.
    I'll give it a try.
  • Baris's Gravatar
    Baris
    Hi Dan,

    I got stuck on this error for days. Had it working in Firefox, Opera, Chome, everything except IE7. Zoom:1 fixed it. Thanx a lot for posting!
  • Timoffei's Gravatar
    Timoffei
    Hi all,

    I had the same problem with pngs, in my case it was a 1x1 px png. Changing the size to 2x2 px solved problems. :)Good Luck
  • Johan's Gravatar
    Johan
    Here's a test I made with AlphaImageLoader and fading 24bit png's in IE7. It shows that it's far from perfect. It works ok (barely) when the image has a steep fade but thats it.

    http://www.snutt.net/testzon/ie_alpha/

    This is only one of the many things that annoy me about IE. Can't believe people still use it...
  • Tobin Lehman's Gravatar
    Tobin Lehman
    Thanks Dan,
    Adding a background-color to the img tag (unconventional), but it worked like a charm. I was fading the img tag, and replacing the src with JQuery for a simple gallery effect.
  • Eystein's Gravatar
    Eystein
    Thank you!!
    I was so sure I was in for a long night of debugging now. Never seen anything this weird in IE before. FYI setting background directly on the img tag did it for me.
  • Jigga's Gravatar
    Jigga
    @eyestein & @tobin lehman:

    what background-color did you set it too? I need it to be transparent.
  • LRHB's Gravatar
    LRHB
    For what it's worth, I tried doing a background color in the CSS and it didn't take. However when I put the CSS inline, on the DIV parent of the img tag, it worked superbulously. Perhaps this may help another in the future!
  • Scott B's Gravatar
    Scott B
    Setting background-color defeats the point transparency which renders the "fix" moot if there's not already a solid color behind the PNGs.

    And here I thought we were finally free of the IE PNG demons (with IE7)...
  • Don Weaver's Gravatar
    Don Weaver
    Big thanks - I've been going round in circles trying to get a background transparent .png work in IE7. Added the Zoom: 1 declaration to the div and it worked just like that.
  • Jeremy's Gravatar
    Jeremy
    I agree with Scott B ---> if I could set a solid color background or border I wouldn't be using a png-24. Tried the zoom: 1; on every possible element, didn't work.

    Conclusion --- IE sucks. Seems like a come to that conclusion alot.
  • Keith Greer's Gravatar
    Keith Greer
    A fantastically simple fix for a problem that really shouldn't exist. Thanks!
  • CLAUDworks's Gravatar
    CLAUDworks
    I've got the ultimate solution for this damn IE-PNG-BlackBorderProblem when using fading or other jQuery effects. It is working in every IE > 6 even in IE8!:

    1. Download jQuery's pngFix at: http://jquery.andreaseberhard.de/pngFix/

    2. Modify this script by searching: if (jQuery.browser.msie && (ie55 || ie6)) { and replace it with: if (jQuery.browser.msie) {

    3. create a blank.gif (1x1 transparent gif)

    4. put a: .pngFix( {blankgif: '< relative location to the blank.gif >'} ); at the end of the line where you perform jQuery effects eg. $('#LOGO').animate( { 'top': '40%', 'opacity': '1.0' }, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );

    5. make sure that all pictures have been loaded before you use jQuery effects within your document ready function by using the .load event on the window DOM-Element:

    $(document).ready( function( ) { $(window).load( function( )
    {
    $('#LOGO').animate( { 'top': '40%', 'opacity': '1.0' }, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );
    } ); } );

    6. Load page in IE8 and feel happy ;-)


    You can see it in action on www.claudworks.net

    No ugly dark borders anymore around some animated PNGs in IE.
  • XWS's Gravatar
    XWS
    @ CLAUDworks: Seems it doesnt work in IE8, nothing fades in with the animate function.
    Does your modified png fix work with fadeIn and fadeOut?
  • Desi Girls's Gravatar
    Desi Girls
    giving background color to the each image, I got it fix in IE. Th@nks every one, you all are rocks!!!
  • Jeffrey Jones's Gravatar
    Jeffrey Jones
    Has anyone tried to implement jQuery feature detection to achieve this?
    var FADE_TIME = 500; if(!($.support.opacity)) { FADE_TIME = 0}

    $('element').fadeOut(FADE_TIME)

    See I below I am still having the same problem with fading transparent png's from one to the next:

    http://iamwhitebox.com/staging/arkitek
  • Aaron S's Gravatar
    Aaron S
    I used CLAUDworks's solution above and it works. Just like everybody else, I have been trying to find a solution everywhere. My somewhat unique problem is that I could not use any fix just for the img tag because my images were background images instead. This solution fixed my issues. Tested in 8 and 7.

    Follow the EXACT directions he gives and you will be happy!
  • Max's Gravatar
    Max
    I don't understand what the claudworks.net demo shows really?
    It might as well be a jpeg fading in on a white background.

    Is there a working IE fix for fading png images over a background image?
  • Scott's Gravatar
    Scott
    I have recently written this article to show you how to export png 8 in Fireworks. http://tocs-i.com/blog/how-to-export-transparent-p...
  • Steffen's Gravatar
    Steffen
    The jquery.pngFix.js and jquery-1.6.4.min doesn't work. Can somebody help or had somebody a solution?

    Thanks
  • Max's Gravatar
    Max
    @Steffen

    I finally found a script that worked for me. And I think I have tested everything posted in this subject. Look at the post made by "pagewil" at the bottom of this page:
    stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8

    The script will find any png image and fix it. If you want to use it on just a few png files you can change the script like this:

    All png images (as posted)
    length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG'){

    Only png images ending with -IE.png. So the images you want to affect will be named like this "myimage-IE.png"
    length-7) === '-IE.png' || imgSrc.substr(imgSrc.length-4) === '-IE.PNG'){

Comments for this entry have been disabled.