motiondivision / motiondivision/motion

[BUG] scroll()/useScroll report elastic overscroll as forward scroll

Open
#3,791 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

2. Describe the bug

During elastic overscroll at the top of the page (Safari's rubber-band, macOS and iOS), window.scrollY goes negative but useScroll().scrollY / info.y.current report the unsigned magnitude, so a 25px pull reads as 25px of forward scroll. Cause: the unconditional Math.abs in updateAxisInfo (added in abaf16e for #3340's reverse-direction containers) also folds the sign of transient overscroll in normal containers.

3. CodeSandbox reproduction

https://codesandbox.io/p/sandbox/3dmxgc

4. Steps to reproduce

  1. Open the sandbox preview in Safari, scrolled to the top.
  2. Pull up so the page rubber-bands.
  3. The readout shows window.scrollY negative while info.y.current reports it positive.

5. Expected behavior

Normal containers keep the signed offset, matching window.scrollY; reverse-direction containers keep the normalized values from #3340; progress stays within [0, 1].

6. Video or screenshots

https://github.com/user-attachments/assets/f510241f-bf39-4c55-88cd-954eef0c29d1

Covered by the sandbox readout.

7. Environment details

motion 12.43.0, also present on current main. Reproduced in Safari on macOS.

Fix branch linked in the comment below.

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 at the unconditional Math.abs in updateAxisInfo and reproduce the behavior with the linked CodeSandbox in Safari. Preserve signed offsets for normal containers while retaining normalized reverse-direction values, keep progress within [0, 1], and verify that the sandbox readout matches window.scrollY during elastic overscroll.

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
Quiet
Clarity
Clearly specified
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.