-webkit-transform CSS Properties Hose Font Rendering

Question

Esta pregunta es más o menos la misma que this one, excepto que la estoy viendo exclusivamente en Safari en Mac (la única plataforma que me tiene que importar). Definitivamente está relacionado con CSS y creo que lo he reducido a unas pocas propiedades que parecen causar estragos en la forma en que se procesa el texto. Ellos son:

-webkit-transform-style: preserve-3d; 
-webkit-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg); 
-webkit-perspective: 2500; 

Tan pronto como desactivo estos (mediante un prefijo con una "x", por ejemplo x-webkit-*), el texto hace bien. Habilitando cualquier uno de ellos resulta en el texto borked. Aquí hay un par de capturas de pantalla que pueden ayudar a visualizar la diferencia.

http://s3.amazonaws.com/codaset/ticket/6404/665/good.pnghttp://s3.amazonaws.com/codaset/ticket/6404/666/bad.png

¿Alguien tiene alguna idea de lo que podría estar causando esto o si/cómo se puede solucionar? Google no ha sido terriblemente útil.

Gracias.

Answer 1

Las transformaciones en Safari se aceleran por hardware. Permite una velocidad mucho mejor, pero el renderizado no sigue la misma canalización y se pierde algo de calidad. No hay nada que puedas hacer al respecto, excepto que no uses transformaciones. :/

Answer 2

Creo que esto es posible corregirlo en versiones posteriores de iOS (creo que 3,2 & 4.0) usando -webkit-font-smoothing: antialiased. Nota: El alias seguirá siendo diferente, pero se verá menos incómodo si está animado.

Answer 3

Encontré este problema hoy y tuve que usar transform: scale(1.1) translate3d(0,0,0); (http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) para ponerlo en funcionamiento.