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

Beheben von verschwommenem Text nach der CSS-Transformation: scale() in Chrome

Chrome-Benutzer haben kürzlich ein Problem gemeldet, bei dem Text nach der Anwendung von a verschwommen wird transform: Scale()-Animation. Dieses Problem tritt nur bei Chrome auf und betrifft andere Webkit-Browser wie Safari nicht.

Die folgende CSS-Animation verursacht die Unschärfe:

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

Um dieses Problem zu beheben, können Sie eines davon verwenden der folgenden Eigenschaften:

• Rückseite Sichtbarkeit:

backface-visibility: hidden;

Diese Eigenschaft vereinfacht die Animation, sodass sie sich nur auf die Vorderseite des Objekts auswirkt, wodurch der durch die Rückseite verursachte Unschärfeeffekt eliminiert wird.

• TranslateZ:

transform: translateZ(0);

TranslateZ erzwingt eine Hardwarebeschleunigung für die Animation kann auch die Unschärfe beheben.

Zusätzlich können Sie die folgende Eigenschaft hinzufügen, um die Darstellung zu verbessern:

-webkit-font-smoothing: subpixel-antialiased;

Dies kann das Erscheinungsbild von Web-Schriftarten leicht verändern, ist aber möglicherweise der Fall Es lohnt sich, damit zu experimentieren.

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