jquery cycle IE7 transparent png problem

Question

unfortunately, though IE7 supports transparent PNG's, only one filter can be applied to an element at a time.

What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.

The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

Another way to get around this is this simple jQuery plugin that i used because i couldn't change the structure. I would give attribution but I honestly cant remember where i found it.

/* IE PNG fix multiple filters */
(function ($) {
    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "empty.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);

NOTE Originally the plugin was written to fix PNG transparency in IE6 but I modified it to work with your problem in IE6+.

Sidenote: I cant remember off the top of my head but i think that IE8 may have the same problem. Correct me if i'm wrong :)

This has been driving me mad for the last few days! Finally found a decent solution that works pretty well.

Add this to your CSS:

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;
}

Credit: Dan Tello

Try adding

cleartype: true, cleartypeNoBg: true

to your cycle jquery arugments. It should be fine now :)

Coupled with the "wrap the image in a div / fade the div" tactic previously mentioned, using this line of CSS will fix the IE issue:

#div img {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png'); 
}

For me it worked to just include the filter property with blank value in jQuery's .animate()function

Maybe this will work for you, too.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

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 giving 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 IE.

Source: Fading a 24-bit transparent PNG in IE7+

Unfortunately, this means that it’s impossible to have transparent PNGs fading in over a transparent background, since you have to apply a background color to the parent element in order for the transition to go smoothly, i.e. without the black pixels. background: transparent won’t work (since transparent isn’t really a color). :(

I'm loading some png's dynamically into the DOM... this worked for me: http://www.twinhelix.com/css/iepngfix/