Bug 227635

Summary: Drag-and-drop gradually degrades transition performance on iOS/iPadOS Safari
Product: WebKit Reporter: Darin Senneff <darin.senneff>
Component: UI EventsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: thorton, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: iPhone / iPad   
OS: iOS 14   
Attachments:
Description Flags
Safari 15 showing transition degradation upon drop events
none
Safari 14 MacOS showing smooth transitions after drop events
none
Safari 16 iOS screen recording none

Darin Senneff
Reported 2021-07-02 12:48:25 PDT
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
Attachments
Safari 15 showing transition degradation upon drop events (33.87 MB, video/quicktime)
2021-07-02 12:48 PDT, Darin Senneff
no flags
Safari 14 MacOS showing smooth transitions after drop events (813.74 KB, video/mp4)
2021-07-02 12:49 PDT, Darin Senneff
no flags
Safari 16 iOS screen recording (16.70 MB, video/quicktime)
2022-09-15 15:47 PDT, Darin Senneff
no flags
Darin Senneff
Comment 1 2021-07-02 12:49:29 PDT
Created attachment 432814 [details] Safari 14 MacOS showing smooth transitions after drop events
Radar WebKit Bug Importer
Comment 2 2021-07-09 12:49:34 PDT
Darin Senneff
Comment 3 2022-09-15 15:14:28 PDT
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
Comment 4 2022-09-15 15:47:47 PDT
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
Comment 5 2023-04-21 09:45:58 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.