motiondivision / motiondivision/motion

[BUG] Wrong position for drag element inside sticky container

Open
#2,236 2 comments 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

When using a drag component inside a position: sticky container, the snap to cursor doesn't work after the element sticks. It looks like the offset is not taken into account.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/serene-flower-jfrhvq

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Open the codesandbox
  2. Click around on the drag element (box with white outline)
  3. Scroll the page until the box sticks to the top
  4. Try clicking around on the drag element, it doesn't follow the cursor vertically

5. Expected behavior

The offset for the sticky element should be taken into account and it should follow the cursor

6. Video or screenshots

https://github.com/framer/motion/assets/106054/86510496-ff2a-457e-bc81-903bea7e7a5b

7. Environment details

Only tested in Chrome on MacOS 12.6.4

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 linked CodeSandbox reproduction and verify the drag behavior before and after the container becomes sticky. Trace the drag offset handling for this case and confirm the fix by reproducing the steps in Chrome; done means the element follows the cursor vertically after sticking.

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.