Bug reportNov 7, 2026· 0:18· 11 views
nextra-theme-docs 4.6.1: 'Scroll to top' ignores prefers-reduced-motion: reduce
0:18 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
lownextra-theme-docs back-to-top / 'Scroll to top' component: the window.scrollTo call with behavior 'smooth' should check matchMedia('(prefers-reduced-motion: reduce)') and use an instant scroll when it matches.
os: macOSdpr: 1url: /docs/guide/syntax-highlightinglocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720emulation: prefers-reduced-motion: reduce (badge shown from 3.0s)
Repro steps
- 1.Open /docs/guide/syntax-highlighting. The H1 'Syntax Highlighting' is shown.
- 2.Enable prefers-reduced-motion: reduce emulation. The badge 'prefers-reduced-motion: reduce ✓ ACTIVE' appears.
- 3.Scroll down the page in four steps of 900px until the 'ANSI highlighting' section is visible.
- 4.Click the 'Scroll to top' link at the bottom right.
Expected
With prefers-reduced-motion: reduce active, clicking 'Scroll to top' should jump to the top of the page instantly with no animated scroll.
Actual
At 13.0s, about 0.6s after the click, the page is caught at an intermediate position showing the 'Features' and 'Inlined code' sections. The top is only reached by the 15.0s frame. This points to an animated smooth scroll that does not respect the reduced-motion preference.
Evidence
visualRed badge reads 'prefers-reduced-motion: reduce ✓ ACTIVE'. It stays visible for the rest of the recording.
visualBefore the click, the viewport is far down the page at the 'ANSI highlighting' section. The 'Scroll to top' link is visible at the bottom right.
visualThe user left clicks the link 'Scroll to top' (role link, tag a).
visualMid-scroll frame. 'Features', 'Inlined code' and 'Highlighting lines' are visible. The page has not reached the top yet.
visualThe page has reached the top. The banner, breadcrumb and H1 'Syntax Highlighting' are visible, and 'Features' is highlighted in 'On This Page'.
visualThe page remains at the top. The final position is correct. Only the animated transition is wrong.
Issue markdown (copy-paste ready)
## Summary
In nextra-theme-docs 4.6.1, the 'Scroll to top' link animates the page scroll even when `prefers-reduced-motion: reduce` is active.
## Environment
- Browser: Chromium 151.0.7922.34
- OS: macOS
- Viewport: 1280x720, DPR 1
- Page: `/docs/guide/syntax-highlighting`
- Emulation: `prefers-reduced-motion: reduce` (badge visible from 3.0s)
## Steps to reproduce
1. Open `/docs/guide/syntax-highlighting` (0.0s).
2. Enable `prefers-reduced-motion: reduce` emulation (3.0s).
3. Scroll down about 3600px, in four steps of 900px, to the 'ANSI highlighting' section (4.8s to 8.9s).
4. Click 'Scroll to top' at the bottom right (12.4s).
## Expected
The page jumps to the top instantly with no scroll animation, because reduced motion is requested.
## Actual
At 13.0s, about 0.6s after the click, the page is mid-scroll and shows the 'Features' and 'Inlined code' sections. It reaches the top by 15.0s. The scroll is animated even though reduced motion is requested.
## Evidence
- 3.0s: badge `prefers-reduced-motion: reduce ✓ ACTIVE` is visible.
- 12.4s: click on link 'Scroll to top'.
- 13.0s: frame shows an intermediate scroll position.
- 15.0s and 17.0s: the page is at the top. The final position is correct.
## Suggested fix
In the back-to-top component, check `window.matchMedia('(prefers-reduced-motion: reduce)').matches`. When it matches, use `behavior: 'auto'` instead of `'smooth'`.
*Recorded with SceneRecap.*Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →