transiciones transicion ejemplos efectos content before after css css3 webkit css-transitions css-transforms

efectos - transiciones css ejemplos



Cómo evitar el renderizado de texto de Webkit durante la transición de CSS (9)

Además de las soluciones anteriores ( -webkit-transform: translateZ(0px) en el elemento y -webkit-font-smoothing: antialiased en la página), algunos elementos pueden tener un mal comportamiento. Para mí fue texto de marcador de posición en un elemento de entrada: para esto, use la position:relative

Estoy usando transiciones CSS para la transición entre estados transformados CSS (básicamente, la transición de la escala de un elemento). Observé que cuando el elemento está en transición, el resto del texto de la página (en Webkit) tiende a alterar ligeramente su renderizado hasta que finaliza la transición.

Fiddle: http://jsfiddle.net/russelluresti/UeNFK/

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

He intentado configurar explícitamente el texto para usar el valor "automático", pero eso no hace nada. También debería tener en cuenta que establecer el suavizado de fuentes en "ninguno" también evita que la representación parpadee durante la transición.

Cualquier ayuda es apreciada.

Editar 1

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

Creo que encontré una solución:

-webkit-transform: translateZ(0px);

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

EDITAR ¡ Como se comentó, este truco desactiva el suavizado de fuentes y puede degradar la representación de texto dependiendo de tus fuentes, navegador y sistema operativo!

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

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

Me he dado cuenta de que cada vez que tengo problemas de gráficos (parpadeo / tartamudeo / interrupción / etc.) debido a una transición, usando -webkit-backface-visibility: hidden; en los elementos que están actuando 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 está sub-pixel antialiased.

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

Para evitar el cambio de representación, debe configurar font-smoothing: antialiased (o none ).

El navegador que deshabilita la representación de fuentes de subpíxeles probablemente sea un efecto secundario de la aceleración de hardware. Cuando el fondo sobre el que está renderizando cambia constantemente, el texto no se puede representar en una capa separada, ya que cada fotograma se debe comparar con todas las capas de fondo. Esto podría degradar severamente el rendimiento.

Apple a menudo desactiva el suavizado de fuentes subpixel en sus propios sitios.

Yo tuve el mismo problema. Léalo detenidamente:

Observé que cuando el elemento está en transición, el resto del texto de la página (en Webkit) tiende a alterar ligeramente su renderizado hasta que finaliza la transición.

ninguna de las soluciones anteriores parecía funcionar. Sin embargo, ajuste (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 la GPU, lo saca del flujo normal de la representación de la página (por ejemplo, elementos como el índice z tampoco funcionarán). Como efecto secundario, la animación y el resto de la página ya no se influenciarán entre sí.

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

ACTUALIZACIÓN mayo 2018

-webkit-font-smoothing: subpixel-antialiased ahora no tiene ningún efecto en Chrome, pero en Safari todavía mejora las cosas mucho, PERO SOLO EN RETINA. Sin él, en las pantallas de Safari en 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 de peso ligero) el texto es un desastre. Recomiendo encarecidamente usar una consulta de medios:

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

Establecer explícitamente -webkit-font-smoothing: subpixel-antialiased es la mejor solución actual si desea evitar al menos parcialmente el texto antialias más fino.

--tl; dr--

Tanto con Safari como con Chrome, donde la representación de fuente predeterminada utiliza antialiasing de subpixel, cualquier CSS que fuerce la renderizació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 "abandonen automáticamente" "en el suavizado de fuentes antialias subpíxel y, en su lugar, cambie a solo texto antialias, que se ve mucho más ligero y más delgado, especialmente en Safari.

Otras respuestas se han centrado en mantener una representación constante simplemente configurando o forzando el suavizado de fuentes al texto antialias más delgado. En mi opinión, el uso de translateZ o la cara oculta ocultos degrada significativamente la calidad de la representación del texto y la mejor solución si quieres que el texto se mantenga constante y que estés de acuerdo con el texto más delgado es solo para usar -webkit-font-smoothing: antialiased . Sin embargo, establecer explícitamente -webkit-font-smoothing: subpixel-antialiased realmente 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 lo hace sin esta configuración. Por lo tanto, parece que esto, al menos parcialmente, evita el cambio a texto antialanzado directo.