Cómo corregir texto crujiente en Safari 5 Mac OS X después de usar las transformaciones css en 3D?

Question

Me he encontrado con un problema cuando se desencadena un comportamiento extraño en los elementos relativos y de posición absoluta después de aplicar el elemento con las transformaciones css 3d.

Para arreglar esto, tengo que establecer el color de fondo, pero ¿qué sucede si necesito transparencia?

Aquí es el mínimo para reproducir el error: http://jsfiddle.net/8VABq/3/

Answer 1

Esto es un error extraño.

Mi primer intento involucrado especificar un color de fondo transparente:

.crispy { 
    position: relative; 
    font-size:.9em; 
    background: rgba(255,255,255,0); 
} 

Sin embargo, esto no funciona. De hecho, si juega con el valor alfa (el cero), parece variar de crujiente (0) a normal (1).

Envolver un div interno y especificar la posición estática tampoco funciona.

La única solución que encontré fue esto:

.crispy { 
    position: relative; 
    font-size:.9em; 
    -webkit-font-smoothing: antialiased; 
} 

Esto, sin embargo, hace que todo el texto un poco más borrosa, ya que no utiliza el suavizado de subpíxeles disponibles en los monitores LCD. Esto puede (o no) ser una solución aceptable.

Answer 2

Tienes que cortar alrededor de averiguar lo que pasa a girar para obtener Safari para desactivar el modo no-alias en las transformaciones. En este caso, si se deshace de webkit-perspective o lo configura a 0px, entonces el texto se vuelve no crujiente. Solo necesitas webkit-perspective si haces transformaciones 3D Y realmente utilizas la tercera dimensión Y la necesitas.

Answer 3

Todavía estoy experimentando este error en Safari 5.1. Lo que funcionó para mí es establecer el suavizado de fuentes yo mismo. El antialiasing de subpixel debería ser el predeterminado, pero aparentemente no lo es. Si agrego lo siguiente al elemento con la representación de fuente quebrada, todo se ve bien otra vez:

-webkit-font-smoothing: subpixel-antialiased;