IE8 not animating jQuery menu properly

Question

Hi all

I am having a real headache. I have written a small and simple menu which employs simple animation (fade in/fade out) powered by jQuery.

My issue is that the animation, when bviewed in ie8 looks awful - while the animation is running big ugly black borders are visible around the text (take a look at the link below you will see what I mean).

The issue is further compounded by the fact that it renders and animates absolutely perfectly in FF, Chrome and Safari.

Now, as you will see from the page I am an experienced web developer and as such am well used to IE quirks, but I cannot find the cause of this particular issue.

The page can be viewed here

Any ideas anyone??

Si

EDIT: As requested, the CSS (although you could see it using Firebug) can be downloaded here

enter code here

Answer 1

It's an anti-aliasing issue. IE is ant-aliasing over the background color during animation, which is black in this case.

Try this change to your nav class:

.nav  {
    background: #D0D0D0 url("../images/menu_plain_top.png") no-repeat scroll 0 0;
}

UPDATE: This post is having a similar issue

Answer 2

I think you're running into the IE8 png fading issue. It does not blend semi-transparent png pixels correctly when combined with a simple opacity filter. To combine the opacity filter with semi-transparent pngs, you have to use the oldschool AlphaImageLoader filter. I think the old IE6 fixer still works to fix this in IE8: http://www.twinhelix.com/css/iepngfix/

UPDATE: Optionally, just disable the fade in IE and toggle from glowing/not-glowing immediately with no fade effect.

Answer 3

Have you tried using the AlphaImageLoader Filter? It supports PNG transparency for IE 5.5+. This may let you keep the PNGs and not have to resort to JPGs.

I'm not exactly sure how your code is structured, but give this a try:

<!-- This DIV is the target container for the image.  -->
<div style="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</div>

For other IE developing solutions, keep this as a bookmark: http://msdn.microsoft.com/en-us/ie/default.aspx