Warum verursacht -webkit-transform: Translate3d verschwommenen Text in WebKit-basierten Browsern?

Post-Animation von verschwommenem Text in WebKit-basierten Browsern durch Translate3d

Bestimmte Animationen implementiert mit -webkit-transform: Translate3d in WebKit-basiert Browser wie das iPhone können zu verschwommenem oder verzerrtem Text führen. Dieses Problem ist auf die Rendering-Engine des Browsers zurückzuführen und bleibt bestehen, obwohl versucht wird, es durch CSS-Problemumgehungen wie das Entfernen der relativen Positionierung oder die Anwendung von -webkit-font-smoothing: antialiased zu entschärfen.

Während JavaScript-basierte Animationsmethoden dieses Problem beheben , beeinträchtigen sie die Leistung auf WebKit-fähigen Geräten. Um das Problem ohne Einbußen bei der Geschwindigkeit zu umgehen, besteht eine Problemumgehung darin, die Transformationswerte leicht zu ändern:

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

Dieser Bruchteilversatz eliminiert effektiv die Unschärfe, während die Leistungsvorteile der Translate3D-Animation erhalten bleiben.

Das obige ist der detaillierte Inhalt vonWarum verursacht -webkit-transform: Translate3d verschwommenen Text in WebKit-basierten Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!