Cómo evitar el cambio de representación de texto de Webkit durante la transición de CSS

Estoy usando transiciones de CSS para la transición entre estados transformados de CSS (básicamente, la transición de la escala de un elemento). Noto que cuando el elemento está en transición, el resto del texto en la página (en Webkit) tiende a alterar levemente su representación hasta que se realiza la transición.

Violín: http://jsfiddle.net/russelluresti/UeNFK/

También noté que esto no ocurre en mis encabezados, que tienen el -webkit-font-smoothing: antialiasedpar propiedad / valor en ellos. Entonces, me pregunto, ¿hay alguna forma de que el texto mantenga su apariencia predeterminada (el valor "automático" para suavizado de fuentes) y no altere la representación durante una transición?

Intenté configurar explícitamente el texto para usar el valor "auto", pero eso no hace nada. También debo tener en cuenta que establecer el suavizado de fuentes en "ninguno" también evita que el renderizado parpadee durante la transición.

Se agradece cualquier ayuda.

Editar 1

Debo señalar que estoy en OS X. Mientras miraba mi prueba en Chrome en Parallels, no vi que los dos párrafos diferentes se comportaran de manera diferente, por lo que este puede ser un problema exclusivo de Mac.

Creo que encontré una solución:

-webkit-transform: translateZ(0px);

Forzar la aceleración de hardware en el elemento padre parece resolver el problema ...

EDITAR Como se comentó, este truco deshabilita el suavizado de fuentes y puede degradar la representación de texto dependiendo de sus fuentes, navegador y sistema operativo.

ACTUALIZACIÓN Agosto 2020

Ya no es necesario orientar a Safari con una consulta de medios para habilitar el suavizado de fuentes de subpíxeles. El valor predeterminado está bien.

Sin embargo , a pesar de que utiliza los subpíxeles suavizado de fuentes por defecto, hay una significativa mosca en la sopa en Chrome suavizado de fuentes, para cualquiera que busque una representación coherente del texto .

1. Esta es la representación de Chrome de texto claro sobre un fondo oscuro
2. Esta es la representación de Chrome de texto oscuro sobre un fondo claro

Mira el tamaño del todo en la letra e de arriba. El texto claro sobre un fondo oscuro se representa con un peso perceptiblemente más pesado que el texto oscuro sobre un fondo claro (con un estilo de fuente CSS idéntico).

Una solución, para los sitios que respetan la configuración del tema oscuro / claro del usuario, es apuntar a Chrome con una consulta de medios que se limita al modo oscuro y cambiarlo a suavizado sin subpíxeles de la siguiente manera:

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

El resultado :

Un peso de texto mucho más consistente independientemente de si se procesa claro sobre oscuro o oscuro sobre claro.

Vea la comparación lado a lado de antes y después:

-

ACTUALIZACIÓN Mayo 2018

-webkit-font-smoothing: subpixel-antialiasedahora no tiene ningún efecto en Chrome pero en Safari todavía mejora mucho las cosas PERO SOLO EN RETINA. Sin él, en Safari en las pantallas de retina, el texto es delgado e insípido, mientras que con él, el texto tiene el peso adecuado. Pero si usa esto en pantallas que no son retina en Safari, (especialmente en valores livianos) el texto es un desastre. Recomiendo encarecidamente utilizar una consulta de medios:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

La configuración explícita -webkit-font-smoothing: subpixel-antialiasedes la mejor solución actual si desea evitar al menos parcialmente el texto antialiased más delgado.

--tl; dr--

Tanto con Safari como con Chrome, donde la representación de fuente predeterminada usa subpíxeles-antialiasing, cualquier CSS que fuerce la representación basada en GPU, como las sugerencias anteriores para usar una transformación usando translateZ o incluso solo una transición de escala, hará que Safari y Chrome "se rindan automáticamente "en el suavizado de fuentes con suavizado de subpíxeles y, en su lugar, cambie a texto solo con suavizado, que se ve mucho más claro y delgado, especialmente en Safari.

Otras respuestas se han centrado en mantener una representación constante simplemente estableciendo o forzando el suavizado de fuentes al texto con suavizado más delgado. En mi opinión, el uso de translateZ o backface hidden degrada significativamente la calidad de la representación del texto y la mejor solución si desea que el texto se mantenga consistente y está de acuerdo con el texto más delgado es solo para usar -webkit-font-smoothing: antialiased. Sin embargo, la configuración explícita en -webkit-font-smoothing: subpixel-antialiasedrealidad tiene algún efecto: el texto aún cambia ligeramente y es visiblemente más delgado durante las transiciones renderizadas en la GPU, pero no tan delgado como sería sin esta configuración. Por lo tanto, parece que esto evita, al menos parcialmente, el cambio a texto sin suavizado.

Me he dado cuenta de que casi todas las veces que tengo problemas con los gráficos (parpadeo / tartamudeo / entrecortamiento / etc.) debido a una transición, uso -webkit-backface-visible: hidden; sobre los elementos que actúan tiende a resolver el problema.

Para evitar cambios en la representación del texto debido a la aceleración del hardware, puede:

1. Establezca todo el texto en -webkit-font-smoothing: antialiased. Esto significa que el texto es más delgado y no tiene un suavizado de subpíxeles.

2. Si desea que el texto que se ve afectado por la aceleración de hardware tenga un suavizado de subpíxeles (el tipo predeterminado de suavizado de fuentes), poner ese texto dentro de una entrada, sin bordes y deshabilitado, mantendrá ese subpíxel suavizado (al menos en Chrome en Mac OS X). No lo he probado en otras plataformas, pero si el antialiasing de subpíxeles es importante, al menos puede usar este truco.

Si está usando Firefox en una Mac, querrá usar el siguiente CSS para solucionar el problema.

-moz-osx-font-smoothing: grayscale;

Más sobre esto en Webfont Smoothing y Antialiasing en Firefox y Opera

Esto es lo que funcionó para mí. Espero eso ayude. Encontrado en otra publicación de stackoverflow.

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

Para evitar el cambio de renderizado, debe establecer font-smoothing: antialiased(o none).

El navegador que deshabilita la representación de fuentes de subpíxeles es probablemente un efecto secundario de la aceleración del hardware. Cuando el fondo contra el que se renderiza cambia constantemente, el texto no se puede renderizar en una capa separada, ya que cada fotograma debe comprobarse con todas las capas de fondo. Esto podría degradar gravemente el rendimiento.

Apple a menudo desactiva el suavizado de fuentes de subpíxeles en sus propios sitios.

Además de las soluciones anteriores ( -webkit-transform: translateZ(0px)en el elemento y -webkit-font-smoothing: antialiaseden la página), algunos elementos aún pueden comportarse mal. Para mí, era un texto de marcador de posición en un elemento de entrada: para esto, useposition:relative

Yo tuve el mismo problema. Léalo detenidamente:

Noto que cuando el elemento está en transición, el resto del texto en la página (en Webkit) tiende a alterar levemente su representación hasta que finaliza la transición.

ninguna de las soluciones anteriores pareció funcionar. Sin embargo, configurar (cosas como)

#myanimation { -webkit-transform: translateZ(0px); }

en el elemento que tiene la animación funcionó.

Al llevar el elemento animado a la capa de GPU, lo sacas del flujo normal de renderizado de la página (cosas como el índice z ya no funcionarán, por ejemplo). Como efecto secundario, la animación y el resto de la página ya no se influirán entre sí.

Si afecta la renderización de su fuente, solo lo hace para el elemento animado, por supuesto. No veo la diferencia en mi Chrome.