Skip to content

fix(dom): preserve scroll position so drag feedback doesn't jump#2091

Open
ronakradadiya wants to merge 1 commit into
clauderic:mainfrom
ronakradadiya:fix/safari-scroll-bottom-drag-jump
Open

fix(dom): preserve scroll position so drag feedback doesn't jump#2091
ronakradadiya wants to merge 1 commit into
clauderic:mainfrom
ronakradadiya:fix/safari-scroll-bottom-drag-jump

Conversation

@ronakradadiya

Copy link
Copy Markdown

Summary

Closes #2089.

In Safari, the dragged element jumps up a row when a scroll container is scrolled to its end — both the page itself and nested scrollable containers.

Taking the source out of flow shrinks the scrollable content, so a container scrolled to its end has its scrollTop clamped by the browser (notably Safari), which leaves the fixed feedback element a row off. The fix captures each scrollable ancestor's offset before the source leaves the flow and restores it once the placeholder restores the content size.

Changes

  • Capture every scrollable ancestor's offset before promoting the source element.
  • Restore any offsets that were clamped, after the placeholder restores the content size.
  • Covers both the page (window) and nested scroll containers.

Testing

  • bun run build
  • bun run test
  • Verified manually in Safari on the Basic setup (page scroll) and Nested scroll stories: scroll to the bottom, drag an item, it now stays aligned with its slot instead of jumping up a row.

@changeset-bot

changeset-bot Bot commented Jun 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9ecec66

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages
Name Type
@dnd-kit/dom Patch
@dnd-kit/abstract Patch
@dnd-kit/collision Patch
@dnd-kit/geometry Patch
@dnd-kit/helpers Patch
@dnd-kit/react Patch
@dnd-kit/state Patch
@dnd-kit/vue Patch
@dnd-kit/solid Patch
@dnd-kit/svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Jun 26, 2026

Copy link
Copy Markdown

Open in StackBlitz

@dnd-kit/abstract

npm i https://pkg.pr.new/@dnd-kit/abstract@2091

@dnd-kit/collision

npm i https://pkg.pr.new/@dnd-kit/collision@2091

@dnd-kit/dom

npm i https://pkg.pr.new/@dnd-kit/dom@2091

@dnd-kit/geometry

npm i https://pkg.pr.new/@dnd-kit/geometry@2091

@dnd-kit/helpers

npm i https://pkg.pr.new/@dnd-kit/helpers@2091

@dnd-kit/react

npm i https://pkg.pr.new/@dnd-kit/react@2091

@dnd-kit/solid

npm i https://pkg.pr.new/@dnd-kit/solid@2091

@dnd-kit/state

npm i https://pkg.pr.new/@dnd-kit/state@2091

@dnd-kit/svelte

npm i https://pkg.pr.new/@dnd-kit/svelte@2091

@dnd-kit/vue

npm i https://pkg.pr.new/@dnd-kit/vue@2091

commit: 9ecec66

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[@dnd-kit/react, useSortable, Safari] When window is scrolled to bottom the dragged element jumps one row

1 participant