Wie kann ich Animationsartefakte auf meinem durch Berühren ziehbaren Rahmenradiuselement auf dem iPad vermeiden?
Ich habe eine kleine Beispielseite mit Elementen geschrieben, die auf Touch-Geräten (basierend aufCode von Peter-Paul Koch).
Meine BeispielseiteIch habe zwei ziehbare<div>
Elemente: ein grüner Block und eine rote Kugel (gemacht kugelförmig mitborder-radius
). Das Ziehen wird mit implementiertontouchstart
, ontouchmove
undontouchend
, und die "Animation" erfolgt durch Ändern dertop
undleft
CSS-Eigenschaften dieser Elemente.
Wenn ich die grüne ziehe, sind alles Rosen und Ponycorns.
Wenn ich jedoch die rote in Safari auf ein iPad 1 (mit iOS 5.1.1) oder ein iPad 3 (6.0.1) ziehe, werden dort, wo sich die hinteren Ränder des Kreises befanden, kleine hellrote Spuren angezeigt (siehe Abbildung unten).
Auf meinem iPhone 5 (6.1.4) werden diese Spuren jedoch nicht angezeigt.
Gibt es eine Möglichkeit, diese Pfade loszuwerden?
(Bonusfrage: Gibt es einen Begriff für diesen Effekt? "Ghosting"? "Artefakte"?)