CODEWITHSUNDEEP
jqueryinternet-explorercleartype
Adis
Adis

Reputation: 804

IE is losing ClearType

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)

Upvotes: 14

Views: 9878

Answers (7)

Rogi
Rogi

Reputation: 11

I've managed to pull a somewhat 'generic' solution. removeAttribute doesn't work if opacity is between 0 and 1, so my two cents solution follows:

Put this code just after the first line of jQuery animate method definition (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
    if (jQuery.browser.msie) {
        var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
    }
    if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
    }
}});
// fix END

...

Hope this will help...

Upvotes: 1

Rogi
Rogi

Reputation: 11

I've managed to pull a somewhat 'generic' solution. removeAttribute doesn't work if opacity is between 0 and 1, so my two cents solution follows:

Put this code just after the first line of jQuery animate method definition (jquery.x.x.x.js)

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
        if (jQuery.browser.msie) {
            var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
        }
        if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
        }
    }
});
// fix END

    ...

Hope this will help...

Upvotes: 1

alex
alex

Reputation: 490233

I've read Firefox 2 uses its 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 propriety filter property.

Upvotes: 0

Simon_Weaver
Simon_Weaver

Reputation: 145940

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.

Upvotes: -1

redsquare
redsquare

Reputation: 78667

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

Upvotes: 5

Aron Rotteveel
Aron Rotteveel

Reputation: 83173

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);

Upvotes: 24

SuperRoach
SuperRoach

Reputation: 215

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.

Upvotes: 2

Related Questions