Active sortable item becomes invisible during drag in Chrome
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
<script lang="ts">
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;
}
}
</script>
<DragDropProvider {onDragStart} {onDragOver} {onDragEnd}>
<ul class="list">
{#each items as id, index (id)}
<SortableItem {id} {index} />
{/each}
</ul>
</DragDropProvider>
<style>
.list {
width: 300px;
margin: 50px auto;
padding: 0;
list-style: none;
}
</style>SortableItem.svelte
<script lang="ts">
import { createSortable } from '@dnd-kit/svelte/sortable';
let { id, index } = $props();
const sortable = createSortable({
get id() {
return id;
},
get index() {
return index;
},
});
</script>
<li {@attach sortable.attach}>
Item {id}
</li>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:
<li
data-dnd-dragging="true"
popover="manual"
>The browser applies the following user-agent rule:
[popover]:where(:not(:popover-open)) {
display: none;
}During dragging:
returns:
Source: clauderic/dnd-kit