Warum ist mein Chrome-Text nach der CSS-Transformation verschwommen und wie kann ich das beheben?

Unscharfer Text in Chrome nach CSS-Transformation: Behoben mit ausgeblendeter Rückseitensichtbarkeit und TranslateZ (0)

Text mit CSS-Transformation skalieren: Scale( ) kann in neueren Versionen von Google Chrome zu Unschärfe führen. Dies wird im Haupttextbereich von http://rourkery.com deutlich, wo der Text nach der Transformation verwischt erscheint.

Die Lösung für dieses Problem liegt in der Verwendung spezifischer CSS-Eigenschaften. Das Hinzufügen von backface-visibility:hidden vereinfacht die Animation, indem der Fokus ausschließlich auf der Vorderseite des Objekts liegt. Die Eigenschaft translatorZ(0) simuliert die Hardwarebeschleunigung für eine flüssigere Animation.

Durch die Integration dieser Eigenschaften in das betroffene Element wird die Unschärfe effektiv beseitigt. Hier ist ein Beispielausschnitt:

@-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);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

Aus Gründen der Klarheit können einige Entwickler auch -webkit-font-smoothing: subpixel-antialiased einschließen, um die Schriftartwiedergabe zu verbessern. Die Notwendigkeit dieser Immobilie variiert jedoch und hängt von den persönlichen Vorlieben ab.

Das obige ist der detaillierte Inhalt vonWarum ist mein Chrome-Text nach der CSS-Transformation verschwommen und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!