workspaces usar trucos resource para inspeccionar google elementos elemento consola como chrome google-chrome css3 webkit transform css-animations

google-chrome - usar - trucos para la consola de google chrome



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

Arreglé mi caso agregando:

transform: perspective(-1px)

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!

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.

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.

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;

En lugar de

transform: scale(1.5);

utilizando

zoom : 150%;

corrige el problema de borrado de texto en Chrome.

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

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

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)

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.

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

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.

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)

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.

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

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

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.