texto Webkit aliasing se pone raro durante las animaciones CSS3

Question

Este es un cobarde. Y estoy seguro de que está relacionado con el sitio web, ya que solo parece ser un problema en la versión de Chrome 20.0.1132.57 y Safari 5.1.7. Subí un video corto para explicar el problema porque sería casi imposible de explicar a través del texto.

vídeo: http://youtu.be/0XttO-Diz2g

versión corta: Durante animaciones CSS3, el texto que está dentro de un elemento posicionado (absoluta o relativa) parece cambiar su antialiasing. Se vuelve más audaz mientras se ejecutan las animaciones.

Nota: Esto no es lo mismo que los elementos escalados convertirse borrosa diring una animación. (this issue)

Cualquier pensamientos, soluciones, etc?

Answer 1

Actualización: Mi vieja respuesta por debajo de las obras, pero es sólo una manera hacky para resolver el problema. En su lugar, lea esto por el motivo de por qué otros elementos se ven afectados: http://jsbin.com/efirip/5/quiet. En resumen: un elemento animado debe colocarse en su propio contexto de apilamiento dándole un z-index.

vieja respuesta:

Está relacionado WebKit. Honestamente, no estoy seguro de por qué lo hace y supongo que también es un error. Puede evitarlo agregando cualquier declaración CSS3 relacionada con 3D a cualquier elemento en la página. Ejemplo:

body { 
    -webkit-transform: translateZ(0); 
} 

O:

body { 
    -webkit-backface-visibility: hidden; 
} 

La presencia de estas declaraciones hace que WebKit utilizar aceleración de hardware para las animaciones que evita el problema que has señalado.