jquery cycle IE7 transparent png problem

Admin 1
Viewed 48486

I'm having trouble getting jquery cycle to work when I have transparent png files in IE7

It's fine in Firefox and Chrome but in IE (version 7) I get a black colour where the png transparency is during the fade.

Can this be made to work right?

asp.net jquery
23 Answers

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 :)

Darko_Z_329430

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

user_5434610

Try adding

cleartype: true, cleartypeNoBg: true

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

Admin1

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:''});
user_5881990
user_2723680

I had this problem with Drupal Views Slideshow using the Fade transition on transparent PNGs.

I stumbled across the following quasi-solution totally by chance. I don't know why it works, but the drawback is it essentially removes the cross-fade envelope in IE (it doesn't appear to visibly affect FF or Safari):

Views Slideshow will print something like the following as part of its output:

<div class="views-field-field-photo-fid">
   <span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>

I hid views-field-field-photo-fid:

.views-field-field-photo-fid { width: 0px; }

Not perfect but maybe good enough till I find a better solution. You can take a look at the development site: http://acupuncture2.polishyourimage.com/

user_5456530
user_1759620

If you can afford to sacrifice a bit of image quality, you can save the images as PNG-8 instead of PNG-24, then apply the fix mentioned by Prosini, i.e.

cleartype: true, cleartypeNoBg: true

and that should work. With PNG-24, I was still getting a bit of black border during the transitions.

user_1337200

While not specifically limited to the cycle plugin, this may help others. I came across this stream in my attempt to find a solution to .animate() transparent/translucent png files. I had the issue of a black border occurring in both IE7 and IE8. The images appear fine until I attempted to use JQuery to animate the opacity... 

$('#my-png-img').stop().animate({opacity:0.0},3000);

I went thru a number of the solutions and unfortunately, none of them were ideal. While this stream is a bit dated, it may help someone else still searching to piece together a solution. I ended up using the Twin Helix solution (http://www.twinhelix.com/css/iepngfix/) with a bit of a tweak. I'm not a huge fan of .htc files but that's beside the point. I edited the iepngfix.htc file (~line 75) to trap for IE7 and IE8. I changed...

!/MSIE (5\.5|6)/.test(navigator.userAgent) ||

to 

!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||

From there I followed the general instructions (see demo) including adding this bit to my CSS

/* IE PNG Fix */
img, div, a, input { 
    behavior: url(/_css/iepngfix.htc) 

}

In addition and as others have mentioned, I had to nest my image in a container...

<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>

Then I applied .animate() effect to the containing div. A bit constraining however, this was the only way I was able to get fading to work consistently. In one case, I even found that the transparency issue affected animating the opacity on a transparent .gif file. Oh and, whether I used .fadeIn()/.fadeOut rather than .animate() made no difference.

user_2384380
Related