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 Beispielseite

Ich 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"?)

Antworten auf die Frage(2)

Ihre Antwort auf die Frage