Skip to content

useScroll with "start"/"end" string offsets broken with position: sticky inside transformed parent since 12.37.0 #3658

Description

@PanagiotisKaraliolios

Describe the bug

Since 12.37.0 ("Support for hardware accelerating "start" and "end" offsets in scroll and useScroll"), useScroll with string offsets like ['start start', 'end end'] no longer works correctly when the target element contains a position: sticky child and is nested inside a parent motion.div with a scale transform.

The scroll progress starts at a non-zero value (content is already partially revealed on entry) and doesn't reach 1.0 before the section scrolls out of view (the reveal animation never completes).

CodeSandbox reproduction

https://codesandbox.io/p/sandbox/5nflw4

Steps to reproduce

  1. Wrap a useScroll + position: sticky scroll-reveal component inside a motion.div that applies a scale transform
  2. Use offset: ['start start', 'end end'] on the inner useScroll
  3. Scroll to the section
  4. Observe: content is already partially revealed on entry, and the animation doesn't complete before scrolling past

Expected behavior

scrollYProgress should range from 0 to 1 across the full scroll distance of the target element, regardless of CSS transforms on ancestor elements. This worked correctly in 12.36.0 and earlier.

Environment details

  • Works: motion@12.36.0 / framer-motion@12.36.0
  • Breaks: motion@12.37.0 / framer-motion@12.37.0 and later (tested up to 12.38.0)
  • Breaking change: "Support for hardware accelerating "start" and "end" offsets in scroll and useScroll" (12.37.0 changelog)
  • OS: Linux
  • Browser: Chrome (latest)
  • React: 19.1.0
  • Next.js: 16.2.0

Activity

  1. added a commit that references this issue on Mar 18, 2026
    6871978
  2. added a commit that references this issue on May 5, 2026
    2ffc157
  3. lezan commented on Jun 1, 2026

    @lezan

    I am still experience the same error with the latest 12.40.0. The only one working for me is still 12.36.0.
    Reproduction code: https://github.com/lezan/use-scroll-bug
    It is basically:

    1. pnpm create next-app@latest my-app --yes
    2. pnpm dlx shadcn@latest add @magicui/text-reveal

    In Firefox 151.0.2 is working but not in Chrome 148.0.7778.217.
    Forgot to mention that in Firefox is working because ViewTimeline API is not implemented, so fallback to something else. Instead in Chrome change the behavior.
    If I fallback in Chrome also with 12.40.0, it works as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    wontfixThis will not be worked on

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions