Warum verschwimmt WebKit-Text bei Verwendung von CSS Scale und Translate3D?

WebKit-Textunschärfe mit CSS Scale und Translate3D

Entwickler stoßen auf ein Problem, bei dem in Chrome und anderen WebKit-Browsern gerenderter Text bei Verwendung von CSS übermäßig unscharf wird Skalierung (Scale oder Scale3D) wird mit Translate3D-Transformationen kombiniert. Dies kann an einem vereinfachten Beispiel beobachtet werden:

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner {
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

Problemumgehung:

Die Lösung dieses Problems erfordert einen einzigartigen Ansatz, da WebKit 3D-transformierte Elemente als Texturen behandelt statt Vektoren. Um die Unschärfe zu beheben, erhöhen Sie die Textgröße und verkleinern das Element, wodurch effektiv eine Textur mit höherer Auflösung entsteht.

Ein aktualisiertes Beispiel mit dieser Problemumgehung:

<div class="test">
  <div class="testInner">

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
  filter: scale(0.8);
}

Während dieser Ansatz effektiv ist Obwohl die Unschärfe reduziert wird, kann es dennoch zu Antialiasing-Problemen kommen. Um dies zu mildern, können Textschatten hinzugefügt werden, um das Erscheinungsbild des Textes zu verbessern.

Das obige ist der detaillierte Inhalt vonWarum verschwimmt WebKit-Text bei Verwendung von CSS Scale und Translate3D?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!