Jank when dragging fast

[manu180]

While testing my app I noticed that it does not work well when an item is moved quite fastly. The sorting is kind of messed up I can replicate it also using your storybook : https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/iframe.html?id=presets-sortable-multiple-containers--basic-setup&viewMode=story

Here is a short video showing the issue :

https://user-images.githubusercontent.com/62107539/173792201-a6caf788-b178-4673-9e46-f3e849c54ed6.mp4

I am wondering if there is any relation with the following issues #58 #123

Apart from that I must say that the library is amazing! Thanks for your help.

[officialgoat]

I have the same problem and can consistently reproduce it. Once it's janked it stays that way too. I'm trying to pinpoint the cause but so far to no avail :/. Did you find any solution so far?

[clauderic]

I believe this will be resolved by #788

[hexwit]

Seems to be related issue is closed, but problem still exists. It is easily reproducible when draggable moved from one sortable context to another, back and forth, fast. However within sortable context fast drag works fine. This library became unusable for the cases when more than one column needed.

ISSUE HAS NO WORKAROUND.

[mdkess]

I've been digging into this, it seems to be caused by not rendering enough. It also seems to only happen in Chrome, not Safari. It also seems to have something to do with hardware acceleration, if I go into chrome://flags and enable "Override software rendering list", the issue disappears. I wonder if there's something to force hardware acceleration?

[officialgoat]

I just checked the "Override software rendering list" flag on Brave (based on Chromium), but I can still reproduce the issue by dragging fast. This is a really big problem for any kanban or multi-container app in general :/.

[timc1]

I've been able to (not ideal) add a short debounce to the onDragOver callback which fixes the sorting issue; as a consequence the transitions do not work as expected. Would be really great if we can get that React 18 fix in! =)

[manu180]

This is indeed a critical issue that may affect all the multi-container apps.

@clauderic, I've tested the multi-container scenario from the storybook related to the #788 and I can confirm that it fixes the issue which is great 👍. Do you have any plan on merging it into the master branch?

Those who would like to do some testing, here is the storybook : https://5fc05e08a4a65d0021ae0bf2-lhfirzxnha.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup

[BoilingSoup]

I still observe this behavior on the NextJS (v13.12.1) dev server, but not on the production build. It doesn't really bother me, but thought I should share.

I haven't tried on Vite or any other dev environments.

[ZengYingJ]

i have the same problem when i use DragOverlay

[BoilingSoup]

Hey everyone, make sure whatever your using for DragOverlay doesn't have a key prop. My overlay had the same key as the draggable item.

Removing the key on the DragOverlay didn't completely fix the jank, but it happens less often + react will often fix the jank in the next rerender.