Fading issues in Internet Explorer 7 when using jQuery

Question

I'm using jQuery on a site that I'm working on and everything works fine - except in Internet Explorer 7 (and previous versions, but the site doesn't support them). Take a look at http://dev.staffanestberg.com/fromsweden/ either in Safari or Firefox, then in IE7 and you'll see what I mean. I'm currently using the built-in effect FadeTo for fading the content, but I've also tried creating custom effects as well as using both Show/Hide, Animate and FadeUp/FadeDown. I'm also using SWFaddress on this site, which might cause errors in combination with IE7, but wouldn't that show up in other browsers as well? What am I missing?

-Staffan

Answer 1

Font Cleartype issue with fade in fade out jQuery

This is a really good explanation of the exact problem. It has to do with the clear type font in IE. This is a fix I've used.

Example:

// This causes this text glich
$("#message").fadeIn();

// This will fix it
document.getElementById("#message").style.removeAttribute("filter");

Fix is to remove the filter.

$('#message').fadeIn(function(){
    this.style.removeAttribute("filter");
});

Source

Answer 2

I've successfully made the show/hide, fadeTo, fadeUp and fadeDown all work in IE6 and above. I find that a lot of problems I have with animations involving revealing an element are related to the the element in question not being hidden at the time of loading.

Try setting the element (table or div) that fades in to style="display:none" either in the html or programatically.

Answer 3

jQuery.fn.fixClearType = function(){
    return this.each(function(){
        if(typeof this.style.filter  && this.style.removeAttribute)
        this.style.removeAttribute("filter");
    })
}

Answer 4

maybe is this a good solution to you (for me it is). The solution is simple but effective (and very nice). IE has problems with alpha transparency when the background of it's parent has no color (total transparency).

What we do here (see example below) is to add a div first that is almost transparent (transparent to the eye). Because it is the first div inside the canvas/container (=> a div for example) and it is placed absolute, all content after this div will be placed on top of the the first div, so this becomes the background of all other content inside this canvas.

Because there is a background now, IE shows no nasty black spots (pixels) or black area's when fading in or out (when changing opacity) or when set the opacity of the canvas to a value below 100.

How to - example with a 100x100 image:

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png" width="100" height="100"/>
</div>

To fade in or fade out the image with jQuery:

    $("#mycanvas").fadeIn("slow", function() 
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);

This is also possible:

$("myImage").fadeIn("slow");

That's it!

Nice thing is that this solution also works with VML/SVG (Raphael) or other content that has alpha transparency. Also you don't have to change/hack your JS code, because this "hack" does not effect other browsers.

Hope it helps.

Answer 5

I've found, what works the best is simply applying a background... Think of it as a GIF. So no jQuery. Pure CSS