Skip to content

fix(docs): reduce vertical scroll jank on docs pages - #1009

Open
quantizor wants to merge 2 commits into
mainfrom
fix/scroll-jank-docs
Open

quantizor wants to merge 2 commits into
mainfrom
fix/scroll-jank-docs

Conversation

@quantizor

Copy link
Copy Markdown
Contributor

Summary

  • CaptureScroll: scroll the real .root scrollport instead of window.scrollBy (which did nothing and fought the sidebar wheel handler). Track main-content wheels in capture phase; keep non-passive only where preventDefault is required. Add overscroll-behavior: contain on the sidebar.
  • Nested scrollport: leave .root as the scroll container (safe for fixed nav/sidebar), but set scroll-behavior: auto so continuous scrolling stays native. Intentional smooth scrolling stays on docs section clicks via scrollIntoView, with prefers-reduced-motion respected.
  • Navbar: remove backdrop-filter: blur(8px) (expensive over scrolling content) and bump navBg alpha 0.85 → 0.94 so the bar still reads solid without frosted-glass cost.
  • Scroll spy: rewrite useScrollSpy to IntersectionObserver on .root instead of getBoundingClientRect + setState every scroll frame.

Does not touch live-editor Proxy (#1008) or homepage showcase.

Test plan

  • Desktop: open /docs/v7, scroll the main column quickly with the wheel/trackpad — should feel native, no hitching.
  • Move cursor onto the sidebar while still scrolling the page — main content should keep scrolling (CaptureScroll redirect).
  • Scroll the sidebar alone when idle — sidebar scrolls; at edges, no runaway chaining.
  • Click sidebar section links — smooth scroll to section unless prefers-reduced-motion: reduce (then instant).
  • Confirm active section highlight still updates while scrolling.
  • Mobile: open/close docs nav; sidebar fold + scroll still work.
  • Dark/light: navbar still readable without blur.

Scroll the real .root scrollport from CaptureScroll instead of window,
drop nav backdrop-filter, move smooth scroll to intentional nav clicks,
and switch sidebar scroll-spy to IntersectionObserver.
@vercel

vercel Bot commented Sep 11, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
styled-components Ready Ready Preview Sep 11, 2026 4:02am UTC

Request Review

@changeset-bot

changeset-bot Bot commented Sep 11, 2026 •

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: c566607

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Bring back nav glass with blur(5px) + translateZ(0) and navBg alpha
0.88 (was 0.85/blur 8). Solid bg when prefers-reduced-transparency.

This branch was successfully deployed

1 active deployment
Preview — c566607c Deployed Sep 11, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant