Skip to content

Closing a mobile popover tray jumps the page to the top, then scrolls back #13630

Description

@lokesh

Problem

On mobile, closing an ol-popover tray (e.g. the Buy dropdown on a book page) by tapping outside it makes the page jump to the top instantly, then animate back down to where the reader was.

The tray locks page scroll by pinning <body> with position: fixed. On close, unlockBodyScroll() unpins it, which shows the page at scroll position 0, and then calls window.scrollTo() to restore the old offset. static/css/base/common.css sets html { scroll-behavior: smooth } site-wide, so that restore animates. ol-dialog and ol-drawer use the same helper.

Reproducing the bug

  1. On a phone (or a narrow viewport), open a book page and scroll down.
  2. Open the Buy dropdown so it appears as a tray.
  3. Tap outside the tray.
  4. Expected: the page stays where it was.
  5. Actual: the page flashes at the top, then scrolls back down.

Context

The global smooth scroll was added in #12910 so the unavailable-book banner's "available alternatives" link would glide to the related-books carousel. It also affects every other same-page link and any script scroll that doesn't set behavior, and the design system page already had to opt out of it.

Breakdown

  • Restore the scroll offset with behavior: 'instant' in scroll-lock.js.
  • Remove the global scroll-behavior: smooth and opt in only the banner link.

Activity

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

Metadata

Metadata

Assignees

Labels

Affects: Mobile/ResponsiveAffects the responsive UI on mobile devices. [managed]Affects: UIIssues with the web site's user interface. [managed]Lead: @lokeshIssues pertaining to front-end design system [css, js, components]Module: CSSModule: JavaScriptIssues related to the JavaScript functionality. [managed]Type: BugSomething isn't working. [managed]

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions