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

.changeset/fix-safari-scroll-bottom-drag-jump.md

@@ -0,0 +1,5 @@
+---
+"@dnd-kit/dom": patch
+---
+
+Fix dragged element jumping by one row in Safari when a scroll container (the page or a nested scrollable element) is scrolled to (or near) its end. Taking the source element out of the document flow shrinks the scrollable content, which clamps the scroll offset at the scroll extreme. The `Feedback` plugin now captures the scroll offsets of every scrollable ancestor before promoting the source element and restores them once the placeholder has restored the content size, keeping the drag feedback aligned with its origin.

packages/dom/src/core/plugins/feedback/Feedback.ts

@@ -6,6 +6,7 @@ import {
   getFixedPositionOffset,
   getFrameTransform,
   getRoot,
+  getScrollableAncestors,
   getWindow,
   isHTMLElement,
   prefersReducedMotion,
@@ -316,6 +317,24 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
 
     /* ---- Apply initial feedback styles ---- */
 
+    const feedbackWindow = getWindow(feedbackElement);
+
+    // 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.
+    // Capture each ancestor's offset so it can be restored once the placeholder
+    // restores the content size.
+    const initialScrollPositions = new Map<
+      Element,
+      {top: number; left: number}
+    >();
+    for (const ancestor of getScrollableAncestors(element)) {
+      initialScrollPositions.set(ancestor, {
+        top: ancestor.scrollTop,
+        left: ancestor.scrollLeft,
+      });
+    }
+
     feedbackElement.setAttribute(ATTRIBUTE, 'true');
 
     const transform = untracked(() => dragOperation.transform);
@@ -357,6 +376,17 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
       }
     }
 
+    // Restore the scroll offsets now that the placeholder has restored the size.
+    for (const [ancestor, position] of initialScrollPositions) {
+      if (ancestor.scrollTop !== position.top) {
+        ancestor.scrollTop = position.top;
+      }
+
+      if (ancestor.scrollLeft !== position.left) {
+        ancestor.scrollLeft = position.left;
+      }
+    }
+
     /* ---- Popover promotion ---- */
 
     if (supportsPopover(feedbackElement)) {
@@ -399,7 +429,6 @@ export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
     const initialShape = new DOMRectangle(feedbackElement);
     untracked(() => (dragOperation.shape = initialShape));
 
-    const feedbackWindow = getWindow(feedbackElement);
     const handleWindowResize = (event: Event) => {
       this.manager.actions.stop({event});
     };