Как я могу избежать артефактов анимации на моем элементе границы радиуса на iPad?
Я написал небольшой пример страницы с элементами, которые можно перетаскивать на сенсорных устройствах (на основекод Петра-Поля Коха).
Мой пример страницыУ меня два перетаскиваемых<div>
элементы: зеленый блок и красный шар (выполненный в форме шара сborder-radius
). Перетаскивание осуществляется сontouchstart
, ontouchmove
а такжеontouchend
и «анимация» осуществляется путем измененияtop
а такжеleft
CSS свойства этих элементов.
Когда я тащу зеленый, все это розы и поникони.
Но когда я перетаскиваю красную в Safari на iPad 1 (под управлением iOS 5.1.1) или iPad 3 (6.0.1), я получаю небольшие светло-красные следы там, где были задние края круга (см. Скриншот ниже).
Однако я не вижу этих следов на моем iPhone 5 (6.1.4).
Есть ли способ избавиться от этих троп?
(Бонусный вопрос: есть ли термин для этого эффекта? «Призраки»? «Артефакты»?)