Texto borroso en Chrome después de la transformación: escala()

En actualizaciones recientes de Chrome, ha surgido un problema peculiar donde el texto se representa mediante la transformación de CSS : la propiedad scale() aparece borrosa. Este problema se ha observado al utilizar este código específico:

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

Visitar roourkery.com en Chrome revela el problema en el área de texto principal, mientras que otros navegadores WebKit (como Safari) no parecen verse afectados.

Una solución al enigma del texto borroso

Para resolver este problema, se pueden utilizar dos enfoques. empleado:

1. Visibilidad de la cara posterior oculta: Esta técnica soluciona el problema simplificando la animación solo al frente del objeto, eliminando los estados frontal y posterior predeterminados.

   backface-visibility: hidden;

2. TranslateZ: Este truco activa la aceleración de hardware para la animación, resolviendo eficazmente el problema de renderizado.

   transform: translateZ(0);

Además, algunos usuarios encuentran beneficioso agregar la siguiente propiedad:

-webkit-font-smoothing: subpixel-antialiased;