clauderic / clauderic/dnd-kit

Active sortable item becomes invisible during drag in Chrome

Open
#2,111 2 comments 1 reaction 0 assignees View on GitHub
bug dom svelte triage:done
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

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

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.