clauderic / clauderic/dnd-kit

Regression: Drag offset starts from top-left corner in Safari after version 0.3.0

Open
#1,910 7 comments 5 reactions 0 assignees View on GitHub
bug dom needs reproduction case triage:done vue
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.