Problemas: Ajax + FadeIn + Fuentes 16pt Sucias (Antialias)

Tengo un ligero problema

Con ajax cargo una página la cual al cargar aplica un efecto tipo Fade In, lo que provoca que la fuente del titulo se vea sucia

Decir que esto solo sucede con IE 6 y 7, con mozilla no sucede y la fuente se puestra perfecta

Asi es como se ve antes y despues


Aqui el css del titulo

Código :

   .titleNote {
      font-family: 'Tahoma';
      font-size: 16pt;
      text-align: center;
   }

su modo de uso

Código :

<div class="titleNote">Duis porta lorem ut</div>

y el efecto fade (El mismo de swfaddress)

Código :

function appear(content, value) {
    if (typeof value == 'undefined') value = 0;
    if (value > 1) return;
    var property = content.filters ? 'filter' : 'opacity';
    content.style[property] = content.filters ? 'alpha(opacity=' + value*100 + ')' : value;
    setTimeout(function () {appear(content, value + .1)} , 50);
}

mi funcion ajax cuando carga

Código :

      if (xhr.readyState == 4) {
         if (xhr.status == 200) {

            var content = document.getElementById('textContener');
            content.innerHTML = xhr.responseText;
            appear(content);

         } else {
            alert('Error: ' + xhr.status + '!');
         }
      }

la pregunta es Hay alguna forma de evitarlo?? o debo quitar el efecto fade.

En un foro en inglés decia algo respecto a la medida de la fuente en puntos y no en pixeles pero no funciono, y no se que tema de bo buscar en internet, si es antialias con CSS o algo asi.

Gracias de antemano.

Curioso, en IE7 eso es algo que se maneja internamente en el navegador, mientras que en IE6 es algo global desde windows por eso del ClearType.

Dudo que se pueda solucionar, pero si encuentras algo avisanos.

Pues viendo una respuesta de un foro de mootools me encuentro que una posible forma de solucionarlo sería añadiendo un color de fondo al elemento que se trata de hacer aparecer:

http://forum.mootools.net/viewtopic.php?id=1235

Sin embargo, como usas una textura de fondo no se que tan bueno o util sea eso. Investigando más a fondo encontré esta respuesta en un google group, que es algo mas explicativa:

http://groups.google.com/group/jquery-ui/browse_thread/thread/f43f3d4c7eb79033

Al parecer los filtros DXTransform que son los responsables de la opacity en internet explorer entran en conflicto con el rendereado de Clear Type, pues al aplicarlos ambos se reduce mucho la legibilidad (Huh?). Asi es que los genios de MS decidieron retirar un efecto al ser retirado el otro.

Puedes probar con la solucion de poner un fondo de color sólido o como caso extremo reemplazar el texto por una (brrr) imagen.

Un saludo.

Hola

Pues si, encontre como una primera solución lo que dice lunatic, eso de ponerle fondo al elemento, pero como tambien dices si es con textura se complica.

Estuve haciendo varios experimentos raros, y me di cuenta que esto sucede nada mas con un determinado tamaño de texto (16pt para arriba), Lo que hice fue intentar dar el mismo efecto final, con una mezcla de bold + size, y al final salio bien.

Nada más como apunte final. Si les pasa esto, como dice Lunatic, pongan un color sólido al elemento al que le hagan el opacity y no habá problema. Igual si su diseño permite ponerle una textura, tambien funciona, y no se nota.

En mi caso el problema es que no me permitio usar la solución anterior, debido a que son titulos en sabe dios que posicion, sobre un una textura con degradado.


Gracias