Autoscroll causes draggable items and click events to become offset from mouse positioning on Safari desktop

[jhea0008]

safari-dndkit-bug-480.mov

After using the drag auto scroll on elements in safari, the sortable list and draggable element behind the dragOverlay gets out of position, and once dropped, mouse events register against the wrong draggable element.

Bug present on macOS 14.2.1 and 14.3 on both Intel and M1. Safari versions 17.3 and 17.2.1. Not sure about older versions as I haven't tested them.

Bug is not present in other browsers such as chrome, firefox or safari iOS

It can be seen as per the video on Sortable vertical basic setup in storybook, and I have also tested it on other drag overlay scenarios without sortable, where it is still present.

[nikischin]

I am having the same issue and it's quite annoying as I have no idea how to fix it... though I really don't understand as it was working in the morning and just randomly stopped working in the afternoon after I restarted my Mac...

[notmedia]

any updates on this?

[JulienRioux]

I had the same issue using a custom dnd context. Basically, the fix form me was to round scrolling distance before applying it. The issue is that Safari is less precise with large decimal numbers, leading to cumulative inaccuracies that grow into a significant offset during automatic scrolling.

[Zwen1111]

I had the same issue using a custom dnd context. Basically, the fix form me was to round scrolling distance before applying it. The issue is that Safari is less precise with large decimal numbers, leading to cumulative inaccuracies that grow into a significant offset during automatic scrolling.

Could you explain how you achieved this? I don't want to create a custom dnd context just for this issue.

[JulienRioux]

I don't know well the package but it seems like making the following change could work. Our issue was around the autoScroller implementation:

const scrollLeft = Math.round(scrollSpeed.current.x * scrollDirection.current.x);
const scrollTop = Math.round(scrollSpeed.current.y * scrollDirection.current.y);

dnd-kit/packages/core/src/hooks/utilities/useAutoScroller.ts

Lines 96 to 97 in e2a1776

	const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
	const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;

[JulienRioux]

Basically, the issue is that you need to round the multiplication of the scrolling speed and the scrolling distance. You can also check if the user is on Safari and other browser that have the same issue.

[robinweser]

@JulienRioux Would it make sense to create a PR with that Math.round applied? I'm currently running into the same issue and would rather not want to provide my own auto scroller.