Warum verschwimmt der Text bei der Verwendung von Translate3d und Scale3d in WebKit-Browsern?

Rätsel bei verschwommenem Text: CSS-Skalierung und Translate3d in WebKit

WebKit-Browser, einschließlich Chrome, weisen ein besonderes Problem auf: Text innerhalb von CSS-skaliert Inhalte werden bei gleichzeitiger Anwendung von Translate3d merklich unscharf. Dieses Verhalten wird im bereitgestellten JS Fiddle-Beispiel deutlich.

JS Fiddle-Beispiel:

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

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

<div class="test">
  <div class="testInner">
    This text becomes blurry in WebKit browsers when translate3d and scale3d are applied.
  </div>
</div>

Fehlerbehebung:

Um dieses Problem zu mildern, wird dies empfohlen zu:

• Textgröße erhöhen:Erhöhen Sie die Schriftgröße des Texts, um die durch Skalierung und Übersetzung verursachte Unschärfe auszugleichen.
• Element verkleinern : Reduzieren Sie die Größe des enthaltenden Elements, damit es in den vergrößerten Text passt. Dadurch wird im Wesentlichen eine Textur mit höherer Auflösung für den Text erstellt und die Klarheit verbessert.

Beispiel:

/* Increase text size */
.testInner {
  font-size: 1.5em;
}

/* Downscale element */
.test {
  -webkit-transform: translate3d(0px, 100px, 0px) scale(0.8);
}

Hinweis:

Diese Problemumgehung behebt zwar das Unschärfeproblem, kann jedoch dennoch zu einem mangelhaften Antialiasing führen. Um die Lesbarkeit zu verbessern, sollten Sie erwägen, dem Text innerhalb des .testInner-Elements einen leichten Textschatten hinzuzufügen.

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