Pregunta 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 tú visitas 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!


75
2018-02-03 21:26


origen


Respuestas:


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.


49
2018-06-02 00:24



En lugar de

transform: scale(1.5);

utilizando

zoom : 150%;

corrige el problema de borrado de texto en Chrome.


9
2018-02-28 19:56



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

Utilizando scale(1.048) encima (1.05) parecía generar una mejor aproximación al tamaño de fuente de un píxel entero, reduciendo la borrosidad subpíxel.

Yo 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.


6
2018-02-03 22:46



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

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);

Eso casi funcionó perfectamente "Casi"Debido a que 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.


5
2017-12-10 18:25



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

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

4
2017-12-05 20:51



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)

4
2018-03-31 10:34



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


3
2017-09-30 07:17



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%;   

2
2018-01-04 17:10