I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about... http://70.86.157.71/test/test3.htm
(link now dead) ...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine. Here's the image... http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.
Because when you download the PNG from the Previewer Window, the PNG LOSES the transparency information.
1 Correct answerChoose Background Color > Transparent. Did you choose File > Export > Export As > PNG? Choose Background Color > Transparent.
The 'gray/white checkerboard' is the general metaphor for transparent areas of a transparent imgage file.
FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ zoom: 1; }
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.
I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() { if (!$.browser.msie || $.browser.version >= 9) { return $(this); } return $(this).each(function() { var img = $(this), src = img.attr('src'); img.attr('src', '/images/general/transparent.gif') .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')"); }); };
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With