JQuery loop IE7 transparent png problem

Question

I am having trouble running jquery loop when I have transparent png files in IE7

This is fine in Firefox and Chrome, but in IE (version 7) I get black color, png transparency during fading.

Can this be done correctly?

Answer 1

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

What happens in your application is that IE7 applies an alpha filter to your PNG, and then jQuery asks you to apply another alpha filter to fade. This has visible results, as you said.

A way around this is to put your png in a container and then wipe the container. Example:

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

Another way around this is a simple jQuery plugin that I used because I could not change the structure. I would give attribution, but I honestly cannot 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 The plugin was originally written to fix PNG transparency in IE6, but I changed it to work with your problem in IE6 +.

Sidenote: I can't remember that IE8 might have the same problem. Correct me if I am wrong :)

Answer 2

It made me crazy for the last few days! Finally found a decent solution that works very 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

Answer 3

Try to add

cleartype: true, cleartypeNoBg: true

for your jquery loop. Now it should be good :)

Answer 4

Combined with “wrap the image in the previous div / fade the div tactic” using this CSS line, you will fix the IE problem:

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

Answer 5

For me, it just included a filter property with an empty value in the jQuery.animate () function

Perhaps this will work for you too.

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

Answer 6

Internet Explorer 7 has some issues with fading transparent PNGs. If you got to this page because you see a black border where the transparent edges are in your PNG, then here are some tips for the Problem:

• Do not fade an element directly, but squeeze out the parent container holding PNG. This may mean that you need to add a shell element to your code.
• Give the parent element a background color.
• Finally, if you still have problems, try specifying your parent element with the old zoom: 1 trick. Give the parent element a zoom: 1 style declaration (via CSS or inline style.) This will force IE to give the hasLayout element, which seeks to fix all sorts of strange display problems in IE.

Source: Wither 24-bit transparent PNG in IE7 +

Unfortunately, this means that it is impossible to have transparent PNGs disappearing on a transparent background, since you must apply the background color to the parent element so that the transition goes smoothly, that is, without black pixels. background: transparent wont work (since transparent is not really a color) .: (

Answer 7

I load png dynamically into the DOM ... this worked for me: http://www.twinhelix.com/css/iepngfix/

Answer 8

I have a final solution for this damn IE-PNG-BlackBorderProblem when using fade or other jQuery effects. It works in every IE> 6 even in IE8 !:

• Download jQuery pngFix at: http://jquery.andreaseberhard.de/pngFix/

• Change this script by searching: if (jQuery.browser.msie && (ie55 || ie6)) { and replace it with: if (jQuery.browser.msie) {

• create blank.gif (1x1 transparent gif)

• type a: .pngFix( {blankgif: '< relative location to the blank.gif >'} ); at the end of the line where you execute jQuery effects, for example. $('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );

• make sure all images have been loaded before using jQuery effects in your finished documentation using the .load event in the DOM-Element window:

  $(document).ready( function() {
$(window).load( function() {
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
});
});

• Load the page in IE8 and feel happy; -)

• You can see it in action at http://www.claudworks.net

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

Answer 9

I had this issue with a Drupal Views slide show using the Fade transition to transparent PNGs.

I stumbled upon the following quasi-solution. I don’t know why this works, but the disadvantage is that it substantially removes the crossfade envelope in IE (it apparently does not explicitly affect FF or Safari):

The slide show view 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 view-field-field-photo-fid:

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

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

Answer 10

I also use Weezy's solution, but don't play well with IE7. The effects are even worse.

When jQuery is assigned an opacity property for the animate function instead of Black-Border-Bug, it generates Black & White-Border-Bug: -P. So, for IE8, I did the following:

In IE8's head, a conditional comment with HTC .fixpng behavior specifically for htc.

 <!--[if IE 8]> <style type="text/css"> .fixpng { /* this fixes transparency in IE8 ONLY! */ behavior: url(css/IE8pngfix.htc); } </style> <![endif]--> 

changed HTC file to IE8pngfix.htc. Changed line 75 in .htc to

! / MSIE (8) /. Test (navigator.userAgent

In fact, it is filtered twice, first IE conditional, and then in htc, but what the hell!

I have found that since htc can interfere with jQuery. Example

   [div id = "tooltip" class = "fixpng"]

I had to change $ (hint div #). Css ({opacity: 0}) to display: none in CSS and set the display: "block" to hover-event.

So, if someone found a working solution for IE7, I would be really happy. All workarounds / hacks above do not work for me. About IE6 I care.

Answer 11

Ok, so I accepted Darko Z's proposal for a div. In the end, this is what I had to do to get jQuery Cycler fadeing FX to work with IE with drupal 7. Instead of placing a tag, I used divs and applied the.png to the background of the image along with

So, I changed this:

 <div class="fademe"> <a href="http://mysite/node/1"> <img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" /> </a> 

:

 <a href="http://mysite/node/1"> <div class="fademe" id="TAB1"></div> </a> 

then in css i did:

 .fademe{ width:640px; height:330px;} #TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;} 

and it works now = D.

Hope this helps, Defigo

Answer 12

I found a fix for this error, just add the following to the wrapper div and to img and other elements (e.g. h1, h2, p)

 #div, #div img { background:none !important; filter:none !important; } 

This will fix it.

Answer 13

It made me crazy for a couple of days, and I finally came across a Unit PNG fix. http://labs.unitinteractive.com/unitpngfix.php - works with Cycle and prevents me from switching to a JPEG solution!

He needs to work hard to target specific PNGs in the loop cycle, but it works!

Answer 14

Hoping to help someone else who is facing this problem:

I had transparent .png backgrounds (tiled) on several divs on my page, and when I activated the jquery loop plugin, these transparent areas became disgusting. They have lost some of their transparency.

My solution was to just make the tiles much bigger, so there really is no tile. There is a slight compromise on file size, but it fixed the problem.

Answer 15

I rewrote the fadeIn and fadeOut methods. It seems I am not getting black in the PNG image. Parent div is not required. However, you are using jQuery.

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

Answer 16

If you can afford to sacrifice a bit of image quality, you can save the images as PNG-8 instead of PNG-24, and 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 black border during transitions.

Answer 17

Although this is not limited to the loop plugin, it may help others. I came across this thread trying to find a solution for .animate () transparent / translucent png files. I had a problem with the black border that occurred in both IE7 and IE8. Images look great until I tried using jQuery to animate opacity ...

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

I went through a series of solutions and, unfortunately, none of them were perfect. Although this thread is a bit outdated, it can help someone else continue to build the solution. I ended up using the Twin Helix solution ( http://www.twinhelix.com/css/iepngfix/ ) with a little change. I am not a big fan of .htc files, but it is not. 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) } 

Also, like the others, I had to paste my image into a container ...

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

Then I applied the .animate () effect to the containing div. However, with a little restraint, this was the only way I was able to get the attenuation to work consistently. In one case, I even found that the transparency issue had an effect on animating the opacity of the transparent .gif file. Oh, and have I used .fadeIn () /. FadeOut, not .animate (), doesn't matter.

Answer 18

Weezy solution worked for me!

I changed the .htc file and changed this line:

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

at

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

Through this .htc script will ignore all .png files if it does not end with .fixme.png (for example, "transparentant.fixme.png"). I intended this to speed up the script a bit and make sure that only .pngs problems are fixed (the ones you have to be transparent).

I use other .png which are not transparent, so no script is required for this.

Answer 19

Best fix unitpngfix .

Include it in your script and be sure to specify the path to your 1px 1px transparent gif. Voila!

Answer 20

This is all pretty troublesome stuff you are asked to do. All very coding encodings.

Here is my suggestion. IE will not allow background png over a colored background to live alone, for example ...

  <div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;">&nbsp;</div> <div style="background-color:#fa0237; position:absolute; z-index:1;">&nbsp;</div> 

Note that the first div is the z-index of 2 (on top of the second div).

This can be simplified by putting your bgColor against css in the 1st Div and removing the second div. This solves the problem of black areas. I had this problem.

The only way I see that you have a problem when you cannot use this method is where you need to lay two png background images on top of each other and disappear at the same time. Do not do this. You need to revive each other one by one.

Answer 21

• Define a solid background color for your image:

     .container img {
          background-color: white;
     }

• Define the css background-image property of your image in the src attribute:

     $ ('. container img'). each (function () {
          $ (this) .css ('background-image', $ (this) .attr ('src'));
     });

Advantage: you do not need to change your markup

Disadvantage: sometimes using a solid background color is not an acceptable solution. This is usually for me.

Answer 22

To solve this problem, simply add:

"filter": ""

to your .css () or .animate () and it will fix a number of IE related issues.

Answer 23

The most reliable solution is not to use png in the style erase animation in browsers <IE9 .

I tried almost all the “fixes” and fix options that I could find for this problem, and was unsuccessful. The solution I used was to export pngs that would have a fade style animation applied to them (e.g. fadeIn / fadeOut) to gifs and do conditional replacements for <IE9 . Although gifs don't look as good as pngs in a modern browser, they look much better than IE8 and earlier versions of png, and this method works reliably. You can still display beautiful pngs for browsers, and when the fix is ​​applied, nothing else will break; Most png hacks are known to violate other css properties. Your code might look something like this:

 $(document).ready(function () { if ($.browser.msie && parseInt($.browser.version, 10) < 9) { $(".myClass, .myOtherClass").each(function (val) { var backgroundValue = val.css("background-image"); backgroundValue.replace('.png', '.gif'); $(this).css("background-image", backgroundValue); //you could just as easily do this with 'img' tags }); } }