clauderic / clauderic/dnd-kit

autoScroll causes continuous flickering when dragging to the right or bottom edge of a scrollable container

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

Description

## Description

When `autoScroll` is enabled, continuously dragging an item toward the right or bottom edge of a scrollable container (keeping the pointer in the auto-scroll activation zone) causes noticeable **flickering / jitter**.

## Steps to reproduce

1. Open the official example: https://tanstack.com/table/v8/docs/framework/react/examples/column-dnd
2. Start dragging any column header
3. Move the pointer to the right (or bottom) edge of the scrollable area and hold it there to trigger continuous auto-scrolling
4. Observe the flickering during the scroll

Reproduction: https://tanstack.com/table/v8/docs/framework/react/examples/column-dnd
(Reproducible on the latest versions)

## Expected behavior

Auto-scrolling should be smooth without any visual flickering or jitter while dragging.

## Actual behavior

- Continuous flickering occurs when auto-scrolling to the right or downward
- The flickering persists as long as auto-scroll is active
- Setting `autoScroll={false}` completely eliminates the issue

## Environment

- `@dnd-kit/core`: ^6.3.1
- `@dnd-kit/sortable`: ^10.0.0
- `@dnd-kit/utilities`: ^3.2.2
- `@tanstack/react-table`: ^8.21.3
- Browser:
- OS:

## Additional context

This issue is particularly noticeable in table column reordering scenarios where the container has horizontal overflow.

Contributor guide

Open the contributing guide

Research direction

Start with the official column-dnd example and reproduce the issue with autoScroll enabled while dragging to the right or bottom edge. Trace the auto-scroll behavior used by the example and compare it with autoScroll={false}; done means continuous edge scrolling is smooth without flickering or jitter.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.