JQuery Fadeto causando texto pixelado no IE8 quando fontes-peso: negrito

Question

Estou desaparecendo e em uma div:

$('.formErrors').fadeTo('fast', 0); 
$('.formErrors').fadeTo('slow', 1);

Mas quando eu faço isso no IE 8, parece que esse pouco de CSS:

.formErrors li { font-weight: bold; }

Está fazendo com que o texto volte bastante distorcido: (imagem abaixo)

http://www.newmania.com/images/error.jpg

O html em que estou aplicando isso é:

<div class="formErrors">
There are errors in your submission. Please fix the following and try again:
<ul><li>Action is empty</li></ul>
</div>

Funciona bem no Firefox. Alguma idéia, por favor?

Answer 1

Uma solução comum é definir uma cor de fundo, se você ainda não tem uma imagem:
http://jsbin.com/axapa

.formErrors {background-color:white;}

Outra opção é usar fadeIn e fadeOut: A animação é até feia, mas pelo menos acaba bem: http://jsbin.com/aboxa

Answer 2

jQuery.fn.fadeIn = function(speed, callback) { 
return this.animate({opacity: 'show'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeOut = function(speed, callback) { 
return this.animate({opacity: 'hide'}, speed, function() { 
    if (jQuery.browser.msie)  
        this.style.removeAttribute('filter');  
    if (jQuery.isFunction(callback)) 
        callback();  
});
};
jQuery.fn.fadeTo = 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();  
});
};

Esse código substituirá algumas propriedades de desbotamento no jQuery específico para o IE. Consegui fazer com que o Fadeto funcione corretamente no IE aqui: https://app.tekstme.com/signup/

Answer 3

Eu sei que esse tópico é muito antigo, mas encontrei uma solução simples. O uso de fundo não era aplicável ao meu caso, porque eu tinha um fundo complexo por trás do texto cujo plano de fundo tinha que ser transparente. De qualquer forma, achei este funcionando muito bem (código CSS para adicionar):

.formErrors{position:relative;}

Answer 4

Usandou003C!DOCTYPE html> Corrigido esse problema para mim no IE8. O texto ainda parece bloqueado durante o desbotamento, mas depois suaviza