IE PNG problem when used with jQuery animate()

FREAKIN’ AWESOME UPDATE – 08/24/11: It appears this problem is now fixed (mostly?). HUGE shout-out to Micah Topping (a commenter below) for giving the link for this. If you now look at my cog animation above in IE7/8, this now works as I want it to, with no apparent differences. I did have to place the images within the divs rather than use a CSS background.

<div id="myWrapper"><img src="images/myImage.png" /></div>

And the CSS:

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

One finaly note….I DID have to take this out of my script that I am using or it wouldn’t work. It was overwriting the filter being put on by the CSS (full script shown further down):

'filter': ''

Even more applause goes to Dan Tello who gave the solution here. I tried the jquery script that was provided there, but I could not get that to work.

END OF UPDATE!

Before I go into what I want to talk about tonight, I need to first toot my own horn a little. I received an email from one of the editors over at onextrapixel.com, inviting me to be a guest writer. Now who knows what will happen with that, but I am extremely excited and honored that they would ask me. I put a lot of work into The Web Machine, so I am just a little bit proud that they would ask me. I am nervous, but in a good way. Here, I can write how I want because its my blog. There, I just hope I don’t embarrass myself. Wish me luck, and I’ll keep you informed of what happens. Seriously, thanks to onextrapixel.com for asking. You made this blogger/web developer very happy just by doing so.

Now…FORWARD! Onto the meat of the post! I should warn you though, that it is partly a story too.

If you have been paying attention here, and reading my posts, you will notice I implemented an animation on my logo using jQuery. I’m quite proud that I got this to work with so little code. Or, at least that was what I thought. The main goal was to fade in the cogs one at a time in sequential order while moving them a certain distance to the left. Just for a refresher, here is the code again:

var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css({'opacity' : 0});
	i=0;
	leftAmount = 0;
 
	function cogMovement () {
		$(cogs[i++]).animate({
				'left': 63 * leftAmount++,
				'opacity': 1,
				'filter': ''
			}, 800, arguments.callee);
 
	};
	cogMovement();

The mind ‘bottling’ problem

If you are REALLY paying attention, this is not exactly the same code I used in my demo. Please be so kind, and view that link in IE7 or 8. IE6, won’t have the same thing going on there because I am using gif’s for that browser instead of png’s for everything else. Do you see how crappy that looks? Want to know why I didn’t write a new article last night? BECAUSE I WAS RESEARCHING INTO THIS FOR OVER 2 HOURS!!

(Oh, and if you didn’t look in IE7/8, the problem is that the drop shadows on the cogs and text are solid black instead of fading nicely into the background)

My big break

I used google like I have never googled before. My big break came from going to the jQuery IRC and finally asking everyone there if they knew what was wrong. Now, at the time, I new the name from reading his blog. What I did not know, was that Paul Irish is a jQuery Team Member. It was him who actually gave me a really good hint to how to work around this issue a little.

When he looked at it, he basically said nothing was wrong, that was just how IE works. Sux and sorry. I’m paraphrasing there, not actual quotes…this was late at night, and I didn’t have my Red Bull yet, so I can’t officially quote him. His little bit of help, even though I knew I didn’t have his full attention was, why not use something like .removeAttr() or something to get rid of the filter?

The Solution

That was when I used IE’s web developer tools and actually looked at the CSS. The stupid browser was putting the filter style on my divs with an alpha(opacity=100) for the value. I sure as hell didn’t put that there. So I tried everything with .removeAttr() to remove ‘style’ from it. All that did was take the opacity go away completely and show the divs right from the start. I still could not get that to work. So my little work around for IE was this line in the .animate():

'filter': ''

Which sets the value for filter to, well…nothing. That essentially takes the fading in gradually out of the game for IE. The cogs appear, and move left, but they don’t do the fade. This is as close as I could come in IE to what I wanted. Works great in Chrome, Safari, Opera, and Firefox, but IE kicked me in the face. I’m actually ok with that, because it is better than nothing, and I got to an acceptable point.

Conclusion

So, the overall lesson with PNG’s in IE7/8? They work fine as statically placed images, but they do not play nicely in a jQuery animation that changes the opacity. I don’t know the technical terms of what is going on behind the scenes, but I DO know that the filter style that IE adds is the problem. After all the searching I did last night, I do not believe there is a complete solution other than what I have done.

PLEASE correct me if I am wrong.

Coupon Code: webmachine

jQuery junkBox

.removeAttr();
This method is really quite fitting with this post. It will remove an attribute from each element that is matched. Below, it will remove the style attribute from an element with an ‘id’ of ‘myContainer.’

$('#myContainer').removeAttr('style');

Tags: ,

29 Responses to “IE PNG problem when used with jQuery animate()”

  1. Peter says:

    Hi, I was (!) fighting with this issue for some hours now.

    filter : ” simply does the trick. I didn’t thought it could be that easy!

    Thanks!

    Regards

    Peter

  2. Andrew Gee says:

    I seem to remember coming across this problem.

    As I recall, there is a workaround for IE. I think all you need to do is animate over a “container” div.

    E.g.

    [div class="animateMe"]
    [div style="background-image:url(.../image.png);"][/div]
    [/div]

    $(‘.animateMe’).animate({

    });

  3. jcDesigns says:

    Thanks Peter! And that was definitely NOT easy. It took me over 2 hours to find that solution, and even that is not perfect. Its close enough (for me at least). I’m placing this in the “graceful degrading” category.

    To Andrew…Ugh…I so don’t want to put in extra divs to do that, but I will give it a shot tonight and see if that clears it up. I’ll comment again and tell you what I find. If that works, I’ll be pissed, because of how simple THAT solution is. I should have thought of that, because the opacity change would no longer be on the div containing the background png.

    • jcDesigns says:

      Ok…so I tried surrounding it in a container and animating that instead. That did not work unfortunately.

  4. Andrew Gee says:

    Sorry, here is a working example of how you can completely fix this problem: http://javascriptbench.appspot.com/htm/opacityIE.html

    • jcDesigns says:

      Thanks for the link Andrew! This does indeed seem to solve the issue. I’ll try it out. I was just hoping for a fix that didn’t include using another library.

      • Andrew Gee says:

        Unfortunately it does not appear to fix the issue in IE8. It’s probably worth mentioning that if you set a background-color to a div that you’re “fading in”, the problem goes away. However this wouldn’t be acceptable in your situation as you need an image behind the pngs being faded in.

  5. jcDesigns says:

    Are you sure? Because at the top of that link you posted it says IE 6/7/8. Ya, I tried the background color just to see if it was an issue with the image itself, or if there was something else going on.

  6. Rishteria says:

    Hey, thanx so much for the post, i haved same problem, but i fixed it deleting some shadows from my png image.

    See yaah!

    • jcDesigns says:

      Thanks for the comment! Nice site by the way, can’t read it because I don’t speak Spanish, but I like the design.

  7. Gabriel says:

    Thank you very much for the solution! I had the same problem and now, it’s working like a charm! I don’t believe, now I can go to the bed!

    []s from Brazil

  8. Brennan says:

    AWESOME!! I was looking everywhere for a simple solution. You are the man.

    • jcDesigns says:

      Glad it helped! Really like the colors of your site. Mainly because mine are orange and gray! Thanks for the comment.

  9. Peter says:

    Hey Dude,

    Just want to say cheers for saving my sanity was up till the early hours last night looking for a fix! Simple and elegant all the way!

    Nice One

    • jcDesigns says:

      Glad I could help. This seems to be my most popular post. Any chance you could provide a url to where you had this issue?

  10. Alex Begg says:

    the added ‘filter’, is not really IE adding it, it is jQuery automatically making all uses of ‘opacity’ in its methods cross-browser, by including the ‘filter’ css (which is the only way to accomplish opacity in older versions of IE). I have no confirmed this, but it must be the case because if you just use ‘opacity’ in a stylesheet, there will be no ‘filter’ unless you manually add it.

    I now only wish I can figure out how to actually stop this png background problem without having to disable fades in IE 8 and lower. Another option, but probably not as pretty, is to remove the ‘filter’ at the end of the animation. It will have it on there during it, but it will not stay there forever (this is probably not good for slow animations). As an alternative to setting the css to ‘filter’: ”, you can also remove the filter all together: this.style.removeAttribute(‘filter’);

  11. Peela says:

    Doesn’t work in IE8, but IE7 seems to be fine. Any ideas?

  12. Peela says:

    The javascriptbench (Andrew Gee) demo doesn’t work in IE8, but in IE7 is fine. Does anyone else have the same result?

  13. Yeah Peela, it’s not working in IE 8.

  14. Ashwin says:

    Thanks a lot… It solved a problem I was struggling with on using jQuery Color Animations…
    After adding the ‘filter’ it worked like a charm on IE8.

    Thanks again and you made my day :)

  15. MadTurki says:

    It’s so strange that such an obvious bug, that has such a simple solution (brilliant btw), even exists. Why is this simply not just built-in to the jQuery animate function? Somebody should pay you the dollars for this!

    • jcDesigns says:

      Thanks for the comment. It is not an end-all solution, just the best I could come up with.

  16. Miguel says:

    Hi there,

    thank you very much for this awesome explanation, thanks your post I have saved a lot of time and probably lots of headaches.

    Miguel.

    • jcDesigns says:

      Thank you! Wow, it’s been over a year since I wrote this post, and it is still getting cool comments. Glad I could help Miguel, and nice site. Love the slider you are using.

  17. Micah Topping says:

    I found the top answer at this stackoverflow question helped me in a few cases, give it a try, it’s pretty ingenious.
    http://stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8

    • jcDesigns says:

      I will give this a try tonight, and comment again if it worked or not. Thanks for the link!

      • jcDesigns says:

        Holy HELL! Totally worked! I had to use images within the divs rather than CSS backgrounds though. There are solutions they give there for that, but I couldn’t get the jQuery script on there to work with it. This was brilliant.

  18. Rick Kuipers says:

    I’d like to add to this.
    I’ve been working on this for a few hours now as well.
    After implementing all these fixes none of them seemed to work.

    But there was one thing that I oversaw… or simply wasn’t mentioned on any blog I’ve seen so far.

    Make sure your container div does NOT have a width and height set, it interferes with the filter.
    Maybe that’s just stupid me but I didn’t know that.

    My problem is gone now and I’d like to thank everyone who contributed to this.

Leave a Reply to Brennan