Textunschärfe in Chrome nach der Transformation: scale()

In den letzten Chrome-Updates ist ein besonderes Problem aufgetreten, bei dem Text mit der CSS-Transformation gerendert wurde : Die Eigenschaft „scale()“ erscheint verschwommen. Dieses Problem wurde bei Verwendung dieses speziellen Codes beobachtet:

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

Der Besuch von rourkery.com in Chrome zeigt das Problem im Haupttextbereich, während andere WebKit-Browser (wie Safari) scheinbar nicht betroffen sind.

Eine Lösung für das Problem des verschwommenen Texts

Um dieses Problem zu lösen, gibt es zwei Ansätze Eingesetzt:

1. Sichtbarkeit der Rückseite ausgeblendet: Diese Technik behebt das Problem, indem die Animation nur auf die Vorderseite des Objekts beschränkt wird und die standardmäßigen Vorder- und Rückseitenzustände eliminiert werden.

   backface-visibility: hidden;

2. TranslateZ: Dies Der Hack aktiviert die Hardwarebeschleunigung für die Animation und löst so effektiv das Rendering-Problem.

   transform: translateZ(0);

Darüber hinaus finden einige Benutzer das Hinzufügen der folgenden Eigenschaft nützlich :

-webkit-font-smoothing: subpixel-antialiased;