Bug 227635 – Drag-and-drop gradually degrades transition performance on iOS/iPadOS Safari

• Component: UI Events
• Status: NEW

[Darin Senneff]

Created attachment 432813 [details]
Safari 15 showing transition degradation upon drop events

Using the HTML drag-and-drop API, I created draggable items that can be swapped with one another. Upon a drop action occurring, I temporarily add a class to the items which transitions them into their new locations. However, each time an item is dropped, the performance of the transition becomes worse and worse. You can see that the transitions are smooth to start, then after each drop they get more and more abrupt, and then finally no transition occurs at all.

Reloading the page does not correct the problem. However, force-quitting Safari and re-opening it does temporarily fix it, as you can see in the attached screen capture.

This problem is only present in Safari on iPadOS 14 and iOS 15. Performance is great in Safari on MacOS.

Screen captures attached from an iPhone 12 Pro running iOS 15beta, which shows the gradual degradation of transition performance. Second screen capture shows the same demo page on Safari 14 on MacOS, which works perfectly with no reduction in quality.

Demo page: https://codepen.io/dsenneff/pen/35f4af2b0b94e72cbc0ba441ec8cf550

[Darin Senneff]

Created attachment 432814 [details]
Safari 14 MacOS showing smooth transitions after drop events

[Radar WebKit Bug Importer]

<rdar://problem/80390098>

[Darin Senneff]

This is still an issue in Safari 16 (iOS/iPadOS only).

I believe this is an issue with Safari itself and not the page contents. If you use the demo page and drag/drop items repeatedly, you'll see the animation gradually get choppier and choppier until it eventually doesn't animate at all. If you then open a new tab or switch to an existing tab and play any CSS animation, the animation in that tab now doesn't play correctly either. The only way to fix is to force quit Safari and reopen.

I use the Drag and Drop API a good amount, and this is a big issue for any of my projects where users have an iPhone. I shouldn't have to resort to disabling drag and drop functionality if a user has one.

[Darin Senneff]

Created attachment 462369 [details]
Safari 16 iOS screen recording

The problem occurs with any DnD demo on the web (I tried several). The more you drag and drop elements, the choppier that animations become. In the attached video from today, you can see me use a DnD demo from the Google team and how that affects animation in another Safari tab over time.

[Darin Senneff]

It looks like this issue is now resolved. Tested on iOS 16.4 Safari and do not experience the issue any longer. I’m still curious if this was an iOS issue or a WebKit issue, but this can be closed out.