fadeIn() does not work for relative positioned child elements in Internet Exporer 8.0

[[email protected]…]

If you have a relative positioned div inside a main div, and you use the fadeIn() function on the main div, the child div is shown instantly instead of fading in.

Here is my test case: ​http://jsfiddle.net/Jk37E/36/

In Internet Explorer 8.0 you see that the first text is shown instantly while the second text is fading in as expected. If you comment out the "position: relative;" for the textDivRelative, both texts are fading in. It's also possible to fix this by adding a "position: relative;" style to the main div.

This bug occurs in all jQuery version I tested (1.3.2+). I used Internet Explorer 8.0.6001.18702. FireFox & Chrome do not have this issue.

[dmethvin]

This is the probem you're encountering: ​http://www.jacklmoore.com/notes/ie-opacity-inheritance

I'm not sure it's wise to implement these fixes at jQuery's level since they can have other effects on the page, but I'll mark it open for the moment.

[anonymous]

Replying to dmethvin:

This is the probem you're encountering: ​http://www.jacklmoore.com/notes/ie-opacity-inheritance

I'm not sure it's wise to implement these fixes at jQuery's level since they can have other effects on the page, but I'll mark it open for the moment.

I guess it's okay to leave everything as it is then. As it is an IE specific bug, Microsoft should fix it (also I doubt they will).

Thanks for the workaround!

Cheers, Dirk

[dmethvin]

This appears to be fixed in IE10 BTW.

[gibson042]

Batch update of oldIE bugs to milestone 1.9 for resolution/reevaluation/closing/etc.