Texto borroso después de usar la transformación CSS: scale (); en Chrome

Parece que ha habido una actualización reciente de Google Chrome que causa texto borroso después de hacer una transform: scale() . Específicamente, estoy haciendo esto:

 @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } 

Si visita http://rourkery.com en Chrome, debería ver el problema en el área de texto principal. No solía hacer esto y no parece afectar a otros navegadores webkit (como Safari). Hubo algunos otros mensajes sobre personas que experimentan un problema similar con las transformaciones 3D, pero no pueden encontrar nada sobre las transformaciones 2d como esta.

Cualquier idea sería apreciada, ¡gracias!

He tenido este problema varias veces y parece que hay 2 maneras de solucionarlo (se muestra a continuación). Puede usar cualquiera de estas propiedades para corregir el renderizado, o ambas cosas al mismo tiempo.

La visibilidad de la cara posterior oculta corrige el problema, ya que simplifica la animación solo en la parte frontal del objeto, mientras que el estado predeterminado es el anverso y el reverso.

 backface-visibility: hidden; 

TranslateZ también funciona ya que es un truco para agregar aceleración de hardware a la animación.

 transform: translateZ(0); 

Ambas propiedades solucionan el problema que está teniendo pero a algunas personas también les gusta agregar

 -webkit-font-smoothing: subpixel-antialiased; 

a su animado al objeto. Me parece que puede cambiar la prestación de una fuente web, pero también puede experimentar con ese método.

En lugar de

 transform: scale(1.5); 

utilizando

 zoom : 150%; 

corrige el problema de borrado de texto en Chrome.

Descubrí que ajustar la relación de escala ayudó levemente.

El uso de una scale(1.048) encima (1.05) pareció generar una mejor aproximación a un tamaño de letra de píxel entero, reduciendo la borrosidad subpíxel.

También utilicé translateZ(0) que parece ajustar el último paso de redondeo de Chrome en la animación de transformación. Esto es una ventaja para mi uso de onhover porque aumenta la velocidad y reduce el ruido visual. Sin embargo, para una función onclick, no la usaría porque la fuente transformada no parece ser tan crujiente.

Sunderls me llevó a la respuesta. Excepto filter: scale no existe, pero filter: blur does.

Aplique las siguientes declaraciones a los elementos que aparecen borrosos (en mi caso estaban dentro de un elemento transformado):

 backface-visibility: hidden; -webkit-filter: blur(0); 

Casi funcionó perfectamente. ” Casi ” porque estoy usando una transición y mientras estoy en transición, los elementos no se ven perfectos, pero una vez que se hace la transición, lo hacen.

Para mejorar la visión borrosa, esp. en Chrome, intente hacer esto:

 transform: perspective(1px) translateZ(0); backface-visibility: hidden; 

Esto debe ser un error con Chrome (Versión 56.0.2924.87), pero a continuación, corrige el efecto borroso cuando cambio las propiedades de CSS en la consola (‘0’). Lo reportaré.

 filter: blur(.0px) 

Intenta usar el zoom: 101%; para diseños complejos cuando no puede usar una combinación de escala de zoom +.

En mi caso, el siguiente código causaba una fuente borrosa:

 -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 

y solo agregar la propiedad de zoom lo solucionó por mí. Juega con el zoom, siguiendo me funcionó:

 zoom: 97%; 

Descubrí que el problema se produce en las transformaciones relativas de cualquier manera. translateX (50%), escala (1.1) o lo que sea. proporcionar valores absolutos siempre funciona (no produce texto borroso (ures)).

Ninguna de las soluciones mencionadas aquí funcionó, y creo que aún no hay solución (usando Chrome 62.0.3202.94 mientras escribo esto).

En mi caso, transform: translateY(-50%) translateX(-50%) causa el desenfoque (quiero centrar un diálogo).

Para alcanzar valores un poco más “absolutos”, tuve que establecer valores decimales para transform: translateY(-50.09%) translateX(-50.09%) .

NOTA

Estoy bastante seguro de que estos valores varían en diferentes tamaños de pantalla. Solo quería compartir mis experiencias, en caso de que ayude a alguien.

Para mí, el problema era que mis elementos usaban transformStyle: preserve-3d . Me di cuenta de que esto no era realmente necesario para la aplicación y eliminarlo corregido la borrosidad.

Ninguno de los anteriores funcionó para mí. Tenía esta animación para ventanas emergentes:

 @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } 

En mi caso, el efecto borroso desapareció después de aplicar esta regla: -webkit-perspective: 1000; a pesar de que está marcado como no utilizado en el inspector de Chrome.

Encontré una solución mucho mejor y más limpia:

 .element{ transform:scale(0.5) transform-origin: 100% 0; } 

o

 .element{ transform:scale(0.5) transform-origin: 0% 0; } 

Gracias a esta publicación: Prevención de la representación borrosa con transformación: escala

Ninguno de los anteriores funcionó para mí.

Funcionó cuando añadí perspectiva

es decir, desde

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

cambié a

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Arreglé mi caso agregando:

 transform: perspective(-1px) 

El texto no será borroso si no realiza la transition la transform .

Solo haz esto:

 &:hover { transform: scale(1.1); } 

Sin transición como transition: all .2s;

Es importante agregar que este problema surge si el elemento que se está traduciendo tiene una altura con un número impar de píxeles. Por lo tanto, si tiene control sobre la altura del elemento, establecerlo en un número par hará que el contenido se vea nítido

puedes usar el filter css para arreglar esto.

 .element { filter: blur(0); } 

sobre el prefijo del proveedor, hágalo usted mismo. -webkit-filter , -ms-filter . el detalle está aquí http://browser.colla.me/show/css_transformation_scale_cause_blurring