Active sortable item becomes invisible during drag in Chrome
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
Description
While using @dnd-kit/svelte sortable, the active dragged item becomes invisible as soon as dragging starts.
Only the currently dragged item disappears. All other sortable items remain visible and continue updating correctly.
The drag operation itself works as expected:
Drag starts successfully
Collision detection works
Reordering works
The item is dropped in the correct position
The issue is only visual: the active dragged item is not rendered while dragging.
Environment
@dnd-kit/svelte: 0.5.0
@dnd-kit/helpers: 0.5.0
Svelte 5
Vite
Chrome 150.0.7871.187 (Stable)
Windows
Minimal reproduction
The issue reproduces with the minimal example from the documentation.
App.svelte
```
import { DragDropProvider } from '@dnd-kit/svelte';
import { move } from '@dnd-kit/helpers';
import SortableItem from './SortableItem.svelte';
let items = $state(Array.from({ length: 20 }, (_, i) => i + 1));
let snapshot: number[] = [];
function onDragStart() {
snapshot = items.slice();
}
function onDragOver(event: any) {
items = move(items, event);
}
function onDragEnd(event: any) {
if (event.canceled) {
items = snapshot;
}
}
{#each items as id, index (id)}
{/each}
.list {
width: 300px;
margin: 50px auto;
padding: 0;
list-style: none;
}
```
SortableItem.svelte
```
import { createSortable } from '@dnd-kit/svelte/sortable';
let { id, index } = $props();
const sortable = createSortable({
get id() {
return id;
},
get index() {
return index;
},
});
Item {id}
```
Actual behavior
The active draggable item becomes invisible immediately after dragging starts.
The item remains interactive and is dropped into the correct position, but it is not visible while dragging.
In DevTools the dragged element has:
```
```
The browser applies the following user-agent rule:
```
[popover]:where(:not(:popover-open)) {
display: none;
}
```
During dragging:
returns:
VIDEO
https://youtu.be/tGLkiSCbdXU
Contributor guide
Research direction
Start by running the minimal reproduction from App.svelte and SortableItem.svelte in Chrome 150, then inspect the element while dragging, including its data-dnd-dragging and popover attributes. Trace the @dnd-kit/svelte sortable attachment and popover behavior; done means the active item remains visible during dragging while collision detection and reordering still work.
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
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100