jQuery fadeIn and fadeOut problems with IE8

I’ve just written a jQuery plugin to allow a user to simply configure some dropdown menu animations. It tests fine in IE6 and IE7, but the fadeIn/fadeOut didn’t work in IE8. Unbelievable. It astonishes me the things that fail in IE8 but were fine in IE7.

The specific instance here was fading a drop down ul element, which was positioned absolutely with respect to an li element with position:relative. You know, standard stuff. Turns out IE8, position:relative and fade don’t play nicely. The solution in the end turned out to be applying:


to the li element. Applying this to the ul has no effect. This doesn’t seem to cause any issues with IE6 or IE7, fortunately.

I also found that in IE8 as the fadeIn completes, the faded text appears to jump a pixel to the left. This isn’t tragic, but it’s a bit irritating. I found that this only happened if I used the fadeIn method. If I fade in by using .animate() to change the opacity, then the jump goes away.

You can see the final result here if you’re interested.

Tags: ,

8 responses to “jQuery fadeIn and fadeOut problems with IE8”

  1. This helped me a lot! Thank you vey much by the trick!

  2. Jatinder says:

    Thanks! It help me lot lot lot….

    It was only my carousel not fading properly in IE8.
    Even the original link of carousel is now working in IE8 for fade effect.

    Your solution solves that problem for me.
    Thanks again 🙂

  3. Jatinder says:

    But can you explain what filter:inherit does actually for IE8?

    What does it mean?

  4. Simon says:

    I think that’s just one of those “features” of IE which isn’t readily explained by normal people….:-))

  5. Any other ideas? Everyone seems to be saying filter: inherit;, but mine doesn’t work still.

  6. Simon says:

    Are you applying it to the correct element? You might try the parent element rather than the fading element.

  7. Jacob says:

    Thanks :]
    also recommend -ms-filter for a fade effect with img (*. Png) with alpha background

    #flexslider-img .slides img{
    	background: transparent;
     	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
      	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE 6 & 7 */      
      	zoom: 1;	
    #flexslider-title .slides li{
    	position: relative;
    	z-index: 12;
  8. Renaldas says:

    working for me, thanks!

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.