#2464·Sortable

[bug] Fallback doesn't move on iOS when inside shadow root

Author: marcustyphoonCreated Apr 9, 2026Updated Apr 9, 2026

Describe the bug

If SortableJS is applied to an element inside of any shadow root, with forceFallback: true, on iOS only, the fallback element will not move with the drag cursor/touch.

On investigation, this is caused by PositionGhostAbsolutely being true (which is iOS-specific), causing getRelativeScrollOffset to be used, which recursively walks up the DOM tree adding up the scroll offsets. If a shadow root is one of these nodes, scrollLeft is undefined and the whole thing returns NaN.

To my knowledge, this is a oneliner fix (scrollLeft/scrollTop are only on elements, so this shouldn't normally process non-element parent nodes):

diff
diff --git a/src/lib/sortable.esm.js b/src/lib/sortable.esm.js
index 824d4814..68f07a0e 100755
--- a/src/lib/sortable.esm.js
+++ b/src/lib/sortable.esm.js
@@ -433,7 +433,7 @@ function getRelativeScrollOffset(el) {
         scaleY = elMatrix.d;
       offsetLeft += el.scrollLeft * scaleX;
       offsetTop += el.scrollTop * scaleY;
-    } while (el !== winScroller && (el = el.parentNode));
+    } while (el !== winScroller && (el = el.parentElement ?? el.parentNode?.host));
   }
   return [offsetLeft, offsetTop];
 }

Related issue: #2128.

To Reproduce Steps to reproduce the behavior:

Open https://7p98t2.csb.app/ on iOS. Drag the first section.

Expected behavior

Information

Versions - Look in your package.json for this information: sortablejs = 1.15.6 @types/sortablejs = n/a

Additional context Add any other context about the problem here.

Reproduction codesandbox: https://codesandbox.io/p/devbox/recursing-dijkstra-7p98t2