Warum wird Webkit-basierter Text nach der Translate3d-Animation verschwommen?

Webkit-basierte Textverzerrung nach der Animation mit Translate3d: Ein anhaltendes Problem

Das Problem von verschwommenem oder verzerrtem Text nach der Animation von Elementen mit Webkit -basierte Browser haben Entwickler schon seit längerem geplagt. Dieses Problem betrifft Browser wie Safari und den Standardbrowser des iPhones.

Hintergrund:

JavaScript-basierte Schieberegler nutzen häufig die Eigenschaft -webkit-transform: Translate3d für eine reibungslose Animation. Diese Technik führt jedoch unbeabsichtigt dazu, dass Text innerhalb des animierten Elements unscharf wird.

Fehlgeschlagene Lösungsversuche:

Es wurden verschiedene Problemumgehungen versucht, um dieses Problem zu beheben, darunter:

• Relative Positionierung entfernen
• Hinzufügen -webkit-font-smoothing: antialiased

Diese Maßnahmen haben sich jedoch als unwirksam erwiesen.

Lösung:

Trotz Prüfung verschiedener Optionen, Die einzige Lösung, die das Verwischen von Text dauerhaft verhindert, besteht darin, auf JavaScript-basierte Animationen zurückzugreifen und translator3d vollständig zu umgehen. Dieser Kompromiss beeinträchtigt jedoch die Leistung auf WebKit-fähigen Geräten.

Eine Teillösung:

Während eine umfassende Lösung weiterhin schwer zu finden ist, wurde eine Teillösung gefunden, die das Problem abschwächt etwas verzerren:

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

Diese Technik führt einen leichten Versatz von 0,1 % zur Position und Transformation des Elements ein. Die Unschärfe wird dadurch zwar nicht vollständig beseitigt, ihre Auswirkungen werden jedoch deutlich reduziert.

Das obige ist der detaillierte Inhalt vonWarum wird Webkit-basierter Text nach der Translate3d-Animation verschwommen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!