jquery cycle IE7 transparent png problem

Question

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?

Answer 1

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

Answer 2

Try adding

cleartype: true, cleartypeNoBg: true

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

Answer 3

This drove me mad for a couple of days and I finally stumbled across Unit's PNG fix. http://labs.unitinteractive.com/unitpngfix.php - works with Cycle and stopped me from switching to a JPEG solution!

It needs a bit of tinkering to target specific PNGs in the cycle div, but she works!

Answer 4

I'm having the same problem - chris you say....

" This drove me mad for a couple of days and I finally stumbled across Unit's PNG fix. http://labs.unitinteractive.com/unitpngfix.php - works with Cycle and stopped me from switching to a JPEG solution!

It needs a bit of tinkering to target specific PNGs in the cycle div, but she works! "

How exactly do you tweak the unitpng script to target your specific images?

Heres a sample of the my code with the images in, i have set cleartype: true, cleartypeNoBg: true in the cycle script.

<script type="text/javascript">

$(document).ready(function() { $('#wedding-dresses').cycle({ fx:'fade', pause:1, cleartype:true, speed: 'fast', timeout: 0, next: '#next', prev: '#prev' }); });

<div class="panel" id="julianne"> 
  <img src="img/wedding-dresses/julianne.png" width="331" class="png_bg" height="437" alt="Julianne"/>
    <div class="description">
        <h3 class="range"> Julianne</h3>
        <p>Crafted from taffeta, extraordinary strapless A-line gown, Julianne features a crisscross woven bodice embellished with delicate hand-beaded and embroidered appliqués. Julianne’s functional corset back, A-line skirt and embellished chapel train create an exquisite look.</p>
 <div class="recommendations">
    <h3>Georgia Recommends</h3>
    <div class="accessory">
        <img src="img/accessories/waistcoats/black-quill2.png" class="png_bg" width="80" height="110"  alt="Black Quill Waistcoat" />
        <p>Black Quill Waiscoat </p>
     </div> <!--end accessory-->
     <div class="accessory">
        <img src="img/shoes/bridal-lady.png" width="109" class="png_bg" height="84" alt="Bridal Shoes" />
        <p>Lady Bridal Shoes </p>
     </div>   <!--end accessory-->
</div><!-- end recommendations-->
   </div><!--end description-->
</div><!-- end julianne panel-->

Any help would be appreciated

Dan

Answer 5

Hoping to help somebody else who encounters this problem:

I had transparent .png backgrounds (tiled) on a few divs on my page and when I activated the jquery cycle plugin, those transparent areas became screwy. They lost some of their transparency.

My solution was to simply make the tiles much bigger, so there really is no tiling at all. There is a small trade off for file size, but it fixed the problem.

Answer 6

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

Answer 7

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

Answer 8

I rewrited the fadeIn and fadeOut methods. It seems I don't get the black color on PNG image. No parent div is needed. Still you use as jQuery.

http://www.pagecolumn.com/javascript/fade.htm

Answer 9

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.

Answer 10

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.

Answer 11

How exactly do you tweak the unitpng script to target your specific images?

I missed this myself too initially, here's the sentence from their site:

If you wish, you can force the script to only fix specific elements by adding the class “unitPng” to those elements. This will cause only those specified elements to be fixed, and may help you work around any layout issues that the Unit PNG Fix may cause by default.

Answer 12

Nothing so complicated. Nice and easy solution was here...

Betreff: Jquery Cycle Plugin and Png Transparency in IE8 and IE7 by suldan on 18-Mar-2010 05:28 AM

http://forum.jquery.com/topic/jquery-cycle-plugin-and-png-transparency-in-ie8-and-ie7

Answer 13

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

Answer 14

Weezy's solution worked for me!

I tweaked the .htc file further, and changed this line:

var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);

to:

var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);

By doing this, the .htc script will ignore all .png files unless they end with .fixme.png (for example "transparant.fixme.png"). I intended this to speed up the script a little and ensure that only problem .pngs are fixed (the ones you must have transparant).

I use other .pngs which are not transparant, and therefore don't need this script to run against them.

Fantastic solution.... Much appreciated.

Answer 15

The best fix is unitpngfix (http://labs.unitinteractive.com/unitpngfix.php). Include it in your script and be sure to provide the path to your 1px by 1px transparent gif. Voila!

Answer 16

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

7. You can see it in action on www.claudworks.net

No ugly dark borders anymore around some animated PNGs in IE.

Answer 17

Is it possible to replace the image with a GIF instead?

Answer 18

'cleartypeNoBg: true' had solved the trensparency problem in IE8 for me. Anyway I am using the random option, so sometimes (random) the images appear diformed larger width than normal (x2) and smaller height (/2)... anyone has a guess?