clauderic / clauderic/dnd-kit

Sortable animations jump inside scaled parent container

Open
#2,041 1 comment 0 reactions 0 assignees View on GitHub
bug react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

## Description
Sortable preview animations become unstable when a sortable list is rendered inside an ancestor with `transform: scale(...)`.
At `scale(1)`, sorting behaves as expected. At `scale(2)`, the sortable preview/sibling items jump back and forth while dragging.

## Reproduction
CodeSandbox:
https://codesandbox.io/p/sandbox/nnjvg6

Recording:

https://github.com/user-attachments/assets/02118c54-677e-490f-8c16-312b6330a1c1

## Expected behavior
Sortable reordering animations should remain stable when the sortable list is inside a scaled parent container.

## Actual behavior
When the parent container is scaled, sortable preview/sibling animations jump or oscillate during dragging.

## Environment
- Package: `@dnd-kit/react`
- Version: `0.4.0`
- Browser: reproduced in browser via CodeSandbox

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.