Warum verursacht „translate3d' nach Animationen in Webkit-Browsern verschwommenen Text?

Webkit-induzierte Textverzerrung nach der Animation: Lösung des Translate3d-Rätsels

Die Verbreitung von Webkit-basierten Browsern, einschließlich iPhone Safari, hat zugenommen brachte ein verblüffendes Phänomen ans Licht: Text wird verschwommen, nachdem Animationen von „-webkit-transform“ bereitgestellt wurden: Translate3d. Dieses Problem hat unzählige Entwickler geplagt und sie verwirrt.

Der Grund für das Problem ist die Abhängigkeit der Website von JavaScript-basierten Slider-Animationen. Wenn man jedoch Translate3d für diese Animationen verwendet, nimmt die Klarheit des Textes ab, insbesondere auf dem iPhone. Gängige „Korrekturen“ wie das Entfernen der relativen Positionierung und das Hinzufügen von „-webkit-font-smoothing: antialiased“ haben sich als erfolglos erwiesen.

Die einzig praktikable Lösung, die diese Verzerrung beseitigt, ist die Aufgabe von Translate3d zugunsten reiner JavaScript-Animationen. Translate3d bietet jedoch den Reiz einer überlegenen Leistung auf WebKit-Geräten. Es bleibt die offene Frage: Warum wirkt sich Translate3d so schädlich auf Texte aus?

Während eine endgültige Antwort noch aussteht, wurde ein Workaround gefunden, der das Problem lindert:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Dieser unorthodoxe Ansatz scheint die Unschärfe zu mildern. Auch wenn es keine perfekte Lösung ist, bietet es doch eine gewisse Erholung von der Frustration verschwommener Post-Animationstexte.

Das obige ist der detaillierte Inhalt vonWarum verursacht „translate3d' nach Animationen in Webkit-Browsern verschwommenen Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!