motiondivision / motiondivision/motion

[BUG] While using Pan/Drag Gesture, the handle jumps away from cursor when scrolled.

Open
#2,457 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
33.7k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
14

Description

1. Read the FAQs 👇

2. Describe the bug

image

When any of the two handles are panned/dragged without scrolling the page, he handles move as expected. But when you scroll the page and move the handles, the handles jumps away from the cursor.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/cool-hooks-82zwjq?file=%2Fsrc%2FApp.tsx%3A326%2C35

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Drag the handles - (Working fine...)
  2. Now scroll the page.
  3. Drag the handles again (The handles jumps)
  4. The handles are working when not scrolled

5. Expected behavior

The behavior when the page is not scrolled (when the scroll is 0) the handles work just fine.

6. Video or screenshots

*Without scroll (Red mark is cursor position)
image

*When scrolled (Red mark is cursor position)
image

7. Environment details

Chrome Browser, Win 11

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the CodeSandbox reproduction at src/App.tsx:326,35 and confirm the handle jump after scrolling the page. Trace the pan/drag gesture handling used by the reproduction and compare its behavior before and after scrolling. Done means both handles remain aligned with the cursor after the page has been scrolled, while preserving the existing unscrolled behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.