Warum ist mein Text in Chrome verschwommen, nachdem ich „transform: scale()' verwendet habe?

Textunschärfe in Chrome nach Transformation: Scale()

In den letzten Chrome-Updates ist ein eigenartiges 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) davon nicht betroffen zu sein scheinen.

Eine Lösung für das Problem mit verschwommenem Text

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;

   Nach dem Login kopieren

2. TranslateZ: Dieser Hack aktiviert die Hardwarebeschleunigung für die Animation, das Rendering-Problem effektiv lösen.

   transform: translateZ(0);

   Nach dem Login kopieren

Darüber hinaus finden einige Benutzer das Hinzufügen der folgenden Eigenschaft von Vorteil:

-webkit-font-smoothing: subpixel-antialiased;

Das obige ist der detaillierte Inhalt vonWarum ist mein Text in Chrome verschwommen, nachdem ich „transform: scale()' verwendet habe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!