Distortion of text in IE

Question

Im using shinding engine , and whenever I move one gadget for repositioning, the bold text inside that gadget gets distorted.

1. 
2. 

Answer 1

IE has an issue where it stops using anti-aliasing once parts of the DOM are modified. There are some work-arounds (Google for these). I think IE9 fixes the problem.

See this question: jQuery fadeIn leaves text not anti-aliased in IE7

Some links in that seem dead.

One of these two changes might help (you may have to experiment with which element to apply them to):

myElement.style.filter = '';

or

$(myElement).removeAttr('style');

Other info: http://reference.sitepoint.com/css/haslayout http://reference.sitepoint.com/css/filter

Answer 2

Here is a custom fadeIn/fadeOut/fadeTo to solve your problem

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
        $(this).fadeIn(speed, function() {
            if(!$.support.opacity)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeOut = function(speed, callback) {
        $(this).fadeOut(speed, function() {
            if(!$.support.opacity)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeTo = function(speed,to,callback) {
        return this.animate({opacity: to}, speed, function() {
            if (to == 1 && jQuery.browser.msie)
                this.style.removeAttribute('filter');
            if (jQuery.isFunction(callback))
                callback();
        });
    };
})(jQuery);

Answer 3

Internet Explorer gets rid of Anti-Aliasing temporarily when performing such tasks as jQuery fade and the example you gave!