jQuery fadeTo causando texto pixelado en IE8 cuando font-weight: bold

Question

estoy desapareciendo, y en un div:

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

Pero cuando hago esto en IE 8, parece que este poco de CSS:

.formErrors li { font-weight: bold; } 

está causando el texto para volver bastante distorsionada: (imagen de abajo)

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

El HTML al que estoy aplicando esto es:

<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 bien en Firefox. Alguna idea, por favor?

Answer 1

Una solución común es definir un color de fondo, si aún no dispone de una imagen:
http://jsbin.com/axapa

.formErrors {background-color:white;} 

Otra opción es utilizar fadeIn y fadeOut: la animación es hasta feo, pero al menos termina bien: 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(); 
}); 
}; 

Este código anulará algunas propiedades de fundido en JQuery específicos para IE. Pude hacer que fadeTo funcionara correctamente en IE aquí: https://app.tekstme.com/signup/

Answer 3

Sé que este hilo es muy viejo, pero encontré una solución simple. El uso de fondo no se aplicaba a mi caso porque tenía un fondo complejo detrás del texto cuyo fondo tenía que ser transparente. De todos modos me pareció que éste trabaja bastante bien (código CSS para añadir):

.formErrors{position:relative;} 

Answer 4

Usando < DOCTYPE html > solucionado este problema para mí en IE8!. El texto sigue pareciendo blocky durante el fade pero luego suaviza