IE Bug: Fading does not work on child elements that have position rules

Affects: IE 8

Description

When using jQuery or similar to fade an element (animate its opacity) IE 8 does not fade child elements that have any ‘position’ property set (’relative’, ‘absolute’, etc).

Workaround

Removing position rules will work, but presumably you’re using them to, well position stuff. The only workaround I have found is to use the IE 7 compatibility meta tag to force IE 8 to render as 7 would.

Unfortunately this means you have to deal with the IE6/7 text anti-alias bug - workaround here

See also

http://glow-project.lighthouseapp.com/projects/33663/tickets/161-fade-animation-children-with-positionrelative-ignore-the-opacity-of-the-parent-in-ie

http://flowplayer.org/tools/forum/55/28425