Regression: Drag offset starts from top-left corner in Safari after version 0.3.0
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
### Description
After commit 911e1714c59b135961bec4614d939a5e29610368, dragging items in **Safari** causes the drag overlay to **start** at the element’s **top-left corner**, ignoring the actual pointer offset. This happens in both Safari desktop and mobile.
Chrome works correctly, but can be reproduced in mobile simulation mode (excluding responsive mode)
### Videos
#### Safari (correct behavior) @dnd-kit/dom@0.2.4 / @dnd-kit/vue@0.2.3
https://github.com/user-attachments/assets/599f2cf8-4be3-4775-8bb6-f5720c30433d
#### Safari (wrong behavior) @dnd-kit/dom@0.3.2 / @dnd-kit/vue@0.3.2
https://github.com/user-attachments/assets/3540a327-b042-4f63-896e-0415237d2f65
#### Chrome (wrong behavior) @dnd-kit/dom@0.3.2 / @dnd-kit/vue@0.3.2
https://github.com/user-attachments/assets/563b4a8a-4f9a-42c9-8a18-3629770d21ed
### Steps to Reproduce
Use the latest version of @dnd-kit/core or @dnd-kit/vue.
Add a simple draggable and drag it in Safari.
The dragged item immediately jumps to the top-left corner.
### Expected Behavior
The drag overlay should preserve the correct pointer offset when the drag starts.
### Actual Behavior
In Safari, the drag overlay always starts at the element’s top-left.
### Suspected Cause
Regression introduced by commit:
911e1714c59b135961bec4614d939a5e29610368
packages/dom/src/utilities/execution-context/getFixedPositionOffset.ts
### Environment
- Safari 17.x (macOS + iOS)
- Latest @dnd-kit/dom (0.3.2) or @dnd-kit/vue (0.3.2)
Contributor guide
Research direction
Start with packages/dom/src/utilities/execution-context/getFixedPositionOffset.ts and compare its behavior before and after commit 911e1714c59b135961bec4614d939a5e29610368. Reproduce the drag in Safari desktop or mobile using the latest @dnd-kit/dom or @dnd-kit/vue, then verify that the drag overlay preserves the pointer offset instead of jumping to the element’s top-left corner.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100