clauderic / clauderic/dnd-kit

[@dnd-kit/core, Safari] Dragging elements in scrollable containers don't scroll all the way up.

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

Description

Minimum reproducible repo: https://github.com/zenshidev/scroll-test

On Safari, there is a bug with `scrollBy` function where using fractional values (`scrollBy(0.5, 1.5)` for example) will break scrolling and prevent scrolling from all the way to top/bottom.
This is not strictly a bug with `@dnd-kit/core`, but the new versions (`@dnd-kit/react`) don't have this bug due to `Scroller` incrementing/decrementing `scrollTop` and `scrollLeft` directly, instead of using `scrollBy` in `AutoScroller`. Using `scrollTo(el.scrollLeft + offsetX, el.scrollTop + offsetY)` also fixes it.

Video:
https://github.com/user-attachments/assets/efdd5bae-65f5-417b-89ec-adecdc30074a

As you can see the draggable element also completely drifts off, and scroll gets stuck even though we haven't reached the top.
I know this is a bug in Safari because executing something like `for(i = 0; i < 500; i++) $0.scrollBy(0, -1.1)` in console, while selecting a scrollable container in Inspect tab will also trigger this bug.

I am opening this issue primarily to just start a discussion if you guys are open about changing `scrollBy` in AutoScroller to something else (and releasing a new version).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.