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
Created attachment 432814 [details] Safari 14 MacOS showing smooth transitions after drop events
<rdar://problem/80390098>
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.
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.
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.