La animación de Chrome hace que el texto sea borroso

Todo funciona bien en Firefox pero Chrome muestra el texto animado borroso. Hice todo como -webkit-font-smoothing: subpixel-antialiased; , -webkit-transform: translate3d(0,0,0); y todo lo mencionado aquí antes:

Post-animación de texto borrosa / distorsionada basada en Webkit a través de translate3d

pero el problema todavía existe

Hice un ejemplo muy simple para mostrarte cómo se ve. ¿Como puedo solucionar este problema?

 var text = 1; function next() { var next = (text == 2) ? 1 : 2; document.getElementById('text' + text).className = 'out'; document.getElementById('text' + next).className = 'in'; text = next; } 
 body { padding: 0; margin: 0; font-family: tahoma; font-size: 8pt; color: black; } div { height: 30px; width: 100%; position: relative; overflow: hidden; margin-bottom: 10px; } div div { opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .in { -webkit-animation: comein 1s 1; -moz-animation: comein 1s 1; animation: comein 1s 1; animation-fill-mode: both; } @keyframes comein { 0% { opacity: 0; } 100% { opacity: 1; } } .out { -webkit-animation: goout 1s 1; -moz-animation: goout 1s 1; animation: goout 1s 1; animation-fill-mode: both; } @keyframes goout { 0% { opacity: 1; } 100% { opacity: 0; } } 
 
Hello! I'm Test Text. I'm Test Text jr Father!
Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)

También puedes ver este ejemplo en CodePen

Esto ha sido un error conocido durante al menos un año: https://bugs.chromium.org/p/chromium/issues/detail?id=521364#c36

El estado es prometedor de uno de los desarrolladores que trabajan en él:

El problema se debió a que ttwigmos cosas en el espacio local de un elemento. Si el elemento tiene una traducción fraccionaria, la textura rasterizada se pegará en la pantalla con la traducción fraccional mediante remuestreo lineal, lo que da como resultado la borrosidad.

La solución es trazar las cosas en un espacio que esté alineado con los píxeles de nuestra pantalla física. es decir, aplicar la traducción fraccional a los comandos de gráficos vectoriales en lugar de textura rasterizada.

La solución vendrá en dos partes:

  1. La primera parte que permite que nuestro sistema de ráster rote con cualquier matriz general. Esta parte está casi lista. Tengo un WIP pero todavía tiene un error que causa regresión de rendimiento. Espero terminarlo dentro de unos días. https://codereview.chromium.org/2075873002/

  2. La segunda parte que permite que nuestra administración de mosaico pueda administrar un conjunto de texturas que viene con una traducción ráster diferente. Originalmente iba a la matriz general, pero resulta que el cálculo de la cobertura de mosaico se vuelve muy difícil. En su lugar, haré una versión más simple que solo admite traducción y escala. Estimo que esto necesitará otra semana de trabajo.

Este error a menudo aparece. Puede intentar transform: translate3d(0, 0, 0) o transform: translateZ(0) y el elemento con la animación, pero no funciona siempre.
-webkit-font-smoothing: antialised es otra opción, pero eso nunca funcionó para mí.

¿Por qué está pasando esto?

Como @staypuftman mencionado aquí , este es un error. pero noté que cuando la animación alcanzó el% 100, Chrome no libera la animación. La razón por la cual Firefox actúa correctamente es que Firefox libera la animación al final, incluso en el modo animation-fill-mode: both .

Solución al problema

Chrome libera la animación al final cuando el modo animation-fill-mode está forward . Esto no puede ayudar a la situación. porque por fin necesitamos que el resultado final se mantenga y no que regresemos al punto original cuando comenzó la animación.

El truco aquí es hacer avanzar el animation-fill-mode . y hacer una clase exactamente como el% 100. Por ejemplo, en la muestra de preguntas,% 100 parte para comein es 100% {opacity:1;} . y lo usamos con animación.

Esto puede ser complicado en CSS, pero puede resolver el problema.

Contras

Puede tener un pequeño retraso o parpadeo al final.

Ejemplo

Aquí puedes ver cómo este simple truco puede resolver el problema:

 var text = 1; function next() { var next = (text == 2) ? 1 : 2; document.getElementById('text' + text).className = 'out'; document.getElementById('text' + next).className = 'in show'; text = next; } 
 body { padding: 0; margin: 0; font-family: tahoma; font-size: 8pt; color: black; } div { height: 30px; width: 100%; position: relative; overflow: hidden; margin-bottom: 10px; } div div { opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .in { -webkit-animation: comein 1s 1; -moz-animation: comein 1s 1; animation: comein 1s 1; animation-fill-mode: forward; } @keyframes comein { 0% { opacity: 0; } 100% { opacity: 1; } } .out { -webkit-animation: goout 1s 1; -moz-animation: goout 1s 1; animation: goout 1s 1; animation-fill-mode: both; } @keyframes goout { 0% { opacity: 1; } 100% { opacity: 0; } } .show{ opacity: 1; /*exactly like 100% of comein*/ } 
 
Hello! I'm Test Text. I'm Test Text jr Father!
Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)

puede consultar este enlace su problema de tiempo de animación pls ver el enlace

 var text = 1; function next() { var next = (text == 2) ? 1 : 2; document.getElementById('text' + text).className = 'out'; document.getElementById('text' + next).className = 'in'; text = next; } 
 body { padding: 0; margin: 0; font-family: tahoma; font-size: 8pt; color: black; } div { height: 30px; width: 100%; position: relative; overflow: hidden; margin-bottom: 10px; } div div { opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .in { -webkit-animation: comein 0.5s 1; -moz-animation: comein 0.5s 1; animation: comein 0.5s 1; animation-fill-mode: both; } @keyframes comein { 0% { opacity: 0; } 100% { opacity: 1; } } .out { -webkit-animation: goout 0.5s 1; -moz-animation: goout 0.5s 1; animation: goout 0.5s 1; animation-fill-mode: both; } @keyframes goout { 0% { opacity: 1; } 100% { opacity: 0; } } 
 
Hello! I'm Test Text. I'm Test Text jr Father!
Hi, I'm test text jr. I'm sharp and beautiful by nature but when I came in, Chrome made me blurry and I'm bad, I'm bad! ... Who's bad :)