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:

filter:inherit

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.
    http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

    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;
    	filter:inherit
    }
  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.