css - rotate - transform translatey

-webkit-transform CSS Properties Manguera Renderización de fuentes

Question

Esta pregunta es muy parecida a esta, 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. Son:

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

Tan pronto como desactivo estos (al agregarles una "x", por ejemplo, x-webkit-* ), el texto se muestra bien. Habilitar cualquiera de ellos da como resultado 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.png http://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

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

Answer 2

Las transformaciones en Safari son aceleradas 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 3

Se encontró con este problema hoy y tuvo que usar transform: scale(1.1) translate3d(0,0,0); ( http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ ) para que funcione.