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!
