clauderic / clauderic/dnd-kit

Variable height elements produce jittering in sortable lists

Open
#2,088 2 comments 6 reactions 0 assignees View on GitHub
bug collision dom
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

A pretty much minimal repro can be seen in the live example itself:

https://main--5fc05e08a4a65d0021ae0bf2.chromatic.com/iframe.html?globals=&args=&id=react-sortable-vertical-list--variable-heights

Big elements work well when being dragged, as seen in the attached video, but small elements cause jitter when dragging over the big ones. This jitter happens consistently but also somewhat randomly, and seems to be proportional to the size of the big element relative to the small one being dragged.

https://github.com/user-attachments/assets/62289938-e994-4a7a-a60f-0ec6b370edd0

Contributor guide

Open the contributing guide

Research direction

Start with the live example’s react-sortable-vertical-list--variable-heights story and reproduce the jitter while dragging a small element over a large one. Trace the sortable-list and collision or positioning behavior involved, then verify that variable-height items can be dragged across one another without visible jitter.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.