jquery won't fade text if positioned: absolute;

Question

I have LI that I want to fade out and back in. Within the list item I have some text. This text is positioned absolutely within the LI.

The catch is that in IE8 (IE6 and 7 seem fine) I can get everything to fade except the text:

http://jsbin.com/esamu/13

If I remove the absolute positioning on the text element (in this case, a P), IE8 then can fade the text properly:

http://jsbin.com/esamu/14

Anyone know why this is? Anyone know of a fix?

UPDATE:

This appears to be a general issue in IE8 if the text is positioned at all. So, not strictly absolute. I have a hunch this is due to the cleartype fade bug.

Answer 1

arnie and prodigit both offered up useful alternatives. Thanks!

In the end, this is the rather silly solution we came up:

In our case, we have a series of LIs that contain an image with text layered (positioned) on top. We fadout the entire LI and, when done, we fade in the next one.

The issue was that the text wouldn't fadeOut/In properly in IE8 (and perhaps 7). The fix is that instead of fading out each LI, we instead are fading in an image on top that happens to match the background (I call it a 'IE fade mask'). Once that image is fully faded in, we swap out the LI in the background and then fade out the image in front.

This gives us the exact same visual appearance, plus the bonus that type remains smoothed in IE.

I think this could also be used for fading LI into another (having one fade out at the same time as the other fades in) and would just require cloning the 'IE fade mask' for each LI.

Answer 2

By positioning the text, IE8 will not inherit opacity. Actually, I don't think this is the same issue as cleartype bug.

I've updated your script with one that works: http://jsbin.com/esamu/19

All I did was change $('li') to $('li,p') so its explicitly selecting the positioned element.

Answer 3

Not sure why but have you tried simply adding the metas to force IE* to render as IE7 for a quick fix?

Answer 4

I had this same problem with absolutely positioned text in ie8 (ie7, 6 were fine) and I resolved it with by assigning a z-index higher to the element fading in and a lower to the fading out :

$('#fadeoutdiv').css({zIndex:7}).fadeOut(2000); $('#fadeindiv').css({zIndex:6}).fadeOut(2000);

credit to Al Flem­ming for this solution.