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

Auflösen von verschwommenem Text nach der CSS-Skalierung in Chrome

Chrome-Benutzer haben kürzlich nach der Anwendung von CSS transform:scale() Textunschärfe festgestellt, insbesondere mit Folgendes:

 0 % {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);

Nach dem Login kopieren

}

50 % {

opacity: 1;
-webkit-transform: scale(1.05);

}

70 % {

-webkit-transform: scale(.9);

}

100% {

-webkit-transform: scale(1);

}
}

Dieses Problem besteht insbesondere in Chrome, mit Ausnahme anderer Webkit-Browser wie Safari.

解决方案：

Um dieses Problem zu lindern, Zwei Methoden haben sich bewährt:

1. Sichtbarkeit der Rückseite:

Wenn Sie die Sichtbarkeit der Rückseite auf „versteckt“ setzen, konzentriert sich das Rendern auf die Vorderseite des Objekts und entschärft so das Problem:

backface-visibility: versteckt;<br> 

2. TranslateZ:

Die Verwendung der TranslateZ-Eigenschaft erzwingt die Hardwarebeschleunigung und bekämpft so effektiv die Unschärfe:

transform: translatorZ(0);<br>

Optional kann zusätzliche Klarheit erreicht werden durch Einbindung von:

-webkit-font-smoothing: subpixel-antialiased;<br>

Experimente mit verschiedenen Kombinationen können das Rendering-Ergebnis weiter verbessern.

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