How to solve/hack fading semi-transparent PNG bug in IE8?

Answer 1

Why don't you try with PNG8. PNG8 is widely known as full transparent as is GIF file format. However exported with Fireworks it can be semi-transparent as is PNG24. The advantage is that IE6 displays the PNG8 with semi-transparent pixels as it is a GIF - or with full transparency, but IE7 and 8 display it correctly as PNG24 and if you fade it with jQuery or whatever js library it will no display the background with gray, because it does not use the famous -filter property.

Answer 2

Tested a semi-transparent PNG8 in IE7 and IE8 and it behaved like a PNG24.

Answer 3

The advantage is that IE6 displays the PNG8 with semi-transparent pixels as it is a GIF - or with full transparency, but IE7 and 8 display it correctly as PNG24 and if you fade it with jQuery or whatever js library it will no display the background with gray, because it does not use the famous -filter property.

There is only one way in IE to do an opacity transform. filter: alpha(opacity:). How else should jQuery do this?

Answer 4

I've managed a fix to this issue for IE 6/7/8.

Roughly looks like this:

<div class="wrapper">
  <div class="image"></div>
</div>

...

/* I had to explicitly specify the width/height by pixel */
.wrapper
{
  width:100px;
  height:100px;
}

.image
{
  width:100%;
  height:100%;
  background:transparent url('image.png') no-repeat;

  /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

...

$(".wrapper").fadeOut('slow');

Note that the "filter" attribute implicitly targets IE only.

Answer 5

i use a modified PNG fix for IE6 it works just great:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

dont forget to upload x.gif. (a transparent 1x1 gif)

Answer 6

Im having the same annoying problem with IE8 and IE7.. anyone tested if Cmc solutions does the trick?

My url is http://www.onlinebrand.dk (Top menu fades in, like Google :) But IE don't care.)

EDIT: Just tested it myself, and even if I set width and height of, well the repeating img. It doesn't work

I just found another work around, where Fadein a wrapper instead of the div with the .png bg image. And it sort of worked, Im now getting som sort of transparency in IE, but also, some padding/margin..Totally wierd..

Bill Gates, Whats up with this? Why can't we get along?

Answer 7

This can be done similar to what Stu has done here: http://www.cssplay.co.uk/menus/flyout_horizontal.html