Fading a 24-bit transparent PNG in IE7
Categories:
HTML/ColdFusion, jQuery
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:
- 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.
- Give the parent element a background color.
- 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.
Dan
-
Feb 17, 2009
@
4:03 PM
45453 Views
Send
Print
Comments (27)
45453 Views
Send
Print
Comments (27)
Comments
@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.
Dan G. Switzer, II
-
Mar 3, 2009
@
9:39 AM
Permalink
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.
@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?
Dan G. Switzer, II
-
Mar 3, 2009
@
11:43 AM
Permalink
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?
@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.
Dan G. Switzer, II
-
Mar 4, 2009
@
7:36 AM
Permalink
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!
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
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...
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.
Tobin Lehman
-
May 7, 2009
@
2:33 PM
Permalink
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.
@eyestein & @tobin lehman:what background-color did you set it too? I need it to be transparent.
Jigga
-
Aug 4, 2009
@
1:54 PM
Permalink
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!
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)...
Scott B
-
Aug 28, 2009
@
2:38 PM
Permalink
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.
Don Weaver
-
Jan 31, 2010
@
3:32 PM
Permalink
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.
Jeremy
-
Mar 5, 2010
@
12:55 AM
Permalink
A fantastically simple fix for a problem that really shouldn't exist. Thanks!
Keith Greer
-
May 31, 2010
@
5:43 AM
Permalink
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.
CLAUDworks
-
Aug 24, 2010
@
5:53 AM
Permalink
@ CLAUDworks: Seems it doesnt work in IE8, nothing fades in with the animate function.Does your modified png fix work with fadeIn and fadeOut?
giving background color to the each image, I got it fix in IE. Th@nks every one, you all are rocks!!!
Desi Girls
-
Sep 28, 2010
@
12:28 PM
Permalink
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
Jeffrey Jones
-
Feb 16, 2011
@
10:44 PM
Permalink
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!
Aaron S
-
May 10, 2011
@
11:16 AM
Permalink
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?
Max
-
Aug 23, 2011
@
8:11 AM
Permalink
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...
The jquery.pngFix.js and jquery-1.6.4.min doesn't work. Can somebody help or had somebody a solution?Thanks
Steffen
-
Nov 30, 2011
@
3:18 PM
Permalink
@SteffenI 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'){
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?