views:

3898

answers:

5

I'm experiencing something really strange!

I have a div that I'm hiding with JS (jQuery). Like this:

$('#myDiv').hide();

Then when I make a fadeIn like this:

$("#myDiv").fadeIn('slow');

then the text loses ClearType in IE but not in FF. If I go with toggle insted of fadeIn, then it's all fine.

What is IE up to and is there any solutions for it because it looks horrible. (I have ClearType on as you maybe understand at this point)

+1  A: 

When fade is applied to IE, it is applying it (at least via jquery) the dxtransform class, which will make it lose any antialiasing effects until its opacity is back to one.

SuperRoach
+15  A: 

A quick search on the subject shows the following:

jQuery fadeIn/fadeOut IE cleartype glitch

The problem seems to be that the CSS "filter" attribute is not automatically removed. The most simple solution to this problem would be removing it manually:

$('#myDiv').fadeIn('slow', function() {
   this.style.removeAttribute('filter');
});

As the blog post above explains, this is a rather messy solution.

Excerpt from the blog post, including a cleaner solution to this problem:

This means that every single time we want to fade an element, we need to remove the filter attribute, which makes our code look messy.

A simple, more elegant solution would be to wrap the .fadeIn() and .fadeOut() functions with a custom function via the plugin interface of jQuery. The code would be exactly the same, but instead of directly calling the fade functions, we call the wrapper. Like so:

$('#node').customFadeOut('slow', function() { 
   //no more fiddling with attributes here
});

So, how do you get this working? Just include the following code after you include the jQuery library for the added functionality.

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
     $(this).fadeIn(speed, function() {
      if(jQuery.browser.msie)
       $(this).get(0).style.removeAttribute('filter');
      if(callback != undefined)
       callback();
     });
    };
    $.fn.customFadeOut = function(speed, callback) {
     $(this).fadeOut(speed, function() {
      if(jQuery.browser.msie)
       $(this).get(0).style.removeAttribute('filter');
      if(callback != undefined)
       callback();
     });
    };
})(jQuery);
Aron Rotteveel
grr why cant they put this in the standard fadeIn. just confirmed its not in 1.3.1 (at least not without requiring additional configuration) so probably not there
Simon_Weaver
even with this solution it still looks pretty awful in my opinion. its blatently obvious there is a glitch. best to try as possible to just fade in colored boxes and let the text appear instantaneously
Simon_Weaver
A: 

I've read Firefox 2 uses it's own text rendering engine whenever opacity is applied (at least on a Mac). This sometimes look strange. I've combated this with this CSS (and it doesn't seem to affect performance at all)

body {
   -moz-opacity: 0.99;
}

This may work in IE too. Oh but you'll need to use IE's interpretation of the opacity which I think is just plain 'opacity'.

alex
+1  A: 

One way is to set a background color on the div (normally) white.

redsquare
didnt work for me in IE7 on vista
Simon_Weaver
This has worked for me the couple of times I've come across the issue. I think you need to set the background colour on the element that's being faded in or out.
Paul D. Waite
A: 

Ok here's my worst solution ever :

<head>
    <script>
        $(function() {
                $(document.body).fadeIn(0);
        });
    </script>
</head>

<body>

    <script>
        $(document.body).hide();
    </script>

    body text
</body>

Immediately hide the body, and fade it in when document is complete. Then you essentially disable cleartype.

Oh and PLEASE dont anybody actaully do this. Or if it REALLY seems to make sense for you then test it well. Just remember you wont see anything until the whole DOM is loaded. I also saw some wierd graphical glitches.

Simon_Weaver