feat: smooth scroll to id in module page#4451
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| html { | ||
| scroll-behavior: smooth; | ||
| } |
There was a problem hiding this comment.
This sets smooth scrolling unconditionally on html. Users with prefers-reduced-motion: reduce will still get animated hash navigation and default scrollIntoView() movement, which regresses the previous instant-scroll behavior for that accessibility setting.
| html { | |
| scroll-behavior: smooth; | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| } |
Prompt To Fix With AI
This is a comment left during a code review.
Path: website/src/views/modules/ModulePageContent.scss
Line: 3-5
Comment:
**Reduced Motion Still Animates**
This sets smooth scrolling unconditionally on `html`. Users with `prefers-reduced-motion: reduce` will still get animated hash navigation and default `scrollIntoView()` movement, which regresses the previous instant-scroll behavior for that accessibility setting.
```suggestion
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
```
How can I resolve this? If you propose a fix, please make it concise.
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #4451 +/- ##
==========================================
+ Coverage 54.52% 58.46% +3.93%
==========================================
Files 274 316 +42
Lines 6076 7300 +1224
Branches 1455 1795 +340
==========================================
+ Hits 3313 4268 +955
- Misses 2763 3032 +269 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
The `html { scroll-behavior: smooth }` rule in the module page stylesheet
was a global element selector, so it leaked to every route once the chunk
loaded and ignored `prefers-reduced-motion`.
Scope the behavior to the module page's lifecycle in JS instead, gated on
`prefers-reduced-motion: no-preference`, and drop the global CSS rule.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return undefined; | ||
|
|
||
| const { style } = document.documentElement; | ||
| style.scrollBehavior = 'smooth'; | ||
| return () => { | ||
| style.scrollBehavior = ''; | ||
| }; | ||
| }, []); |
There was a problem hiding this comment.
prefers-reduced-motion only when the module page mounts. If a user opens the page with reduced motion off, then enables reduced motion while staying on the same module page, html.style.scrollBehavior remains smooth until unmount. Later side-menu hash clicks can still animate even after the user has requested reduced motion.
Prompt To Fix With AI
This is a comment left during a code review.
Path: website/src/views/modules/ModulePageContent.tsx
Line: 78-85
Comment:
**Reduced motion can persist** This samples `prefers-reduced-motion` only when the module page mounts. If a user opens the page with reduced motion off, then enables reduced motion while staying on the same module page, `html.style.scrollBehavior` remains `smooth` until unmount. Later side-menu hash clicks can still animate even after the user has requested reduced motion.
How can I resolve this? If you propose a fix, please make it concise.1 participant
No description provided.