„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Warum ist mein Text in Chrome verschwommen, nachdem ich „transform: scale()“ verwendet habe?

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

Veröffentlicht am 24.12.2024
Durchsuche:473

Why is My Text Blurry in Chrome After Using `transform: scale()`?

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;
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3