fix(web): respect prefers-reduced-motion in AnimatedBackground #8329
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ensure the animated canvas renders a single static frame and never starts requestAnimationFrame when prefers-reduced-motion: reduce is enabled. Adds runtime listener to stop animations if the user toggles the setting. Mousemove listener is only attached when animating.
dosubot
bot
added
size:M
Contributor
|
🚀 Preview deployed! Your changes have been deployed to Vercel: Preview URL: https://roo-code-website-mvch0cz82-roo-code.vercel.app This preview will be updated automatically when you push new commits to this PR. |
hannesrudolph
added
the
Issue/PR - Triage
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| if (!isAnimating) return | ||
| isAnimating = false | ||
| window.removeEventListener("mousemove", handleMouseMove) | ||
| if (animationId !== undefined) cancelAnimationFrame(animationId) |
Contributor
Author
There was a problem hiding this comment.
P3: Minor: after cancelAnimationFrame, reset animationId to undefined to avoid accidental double-cancel or stale ids after toggling animation state.
Suggested change
| if (animationId !== undefined) cancelAnimationFrame(animationId) | |
| if (animationId !== undefined) { | |
| cancelAnimationFrame(animationId) | |
| animationId = undefined | |
| } |
| drawGrid() | ||
| } else { | ||
| startAnimation() | ||
| } |
Contributor
Author
There was a problem hiding this comment.
P2: Older Safari uses the legacy addListener API for MediaQueryList. Add a runtime fallback so preference changes are handled across browsers.
Suggested change
| } | |
| if ("addEventListener" in mediaQuery) { | |
| mediaQuery.addEventListener("change", onMotionPreferenceChange) | |
| } else { | |
| // Safari < 14 | |
| // @ts-expect-error legacy API | |
| mediaQuery.addListener(onMotionPreferenceChange) | |
| } |
| cancelAnimationFrame(animationId) | ||
| // Ensure animation and listeners are stopped | ||
| stopAnimation() | ||
| if (mediaQuery) mediaQuery.removeEventListener("change", onMotionPreferenceChange) |
Contributor
Author
There was a problem hiding this comment.
P2: Mirror the addListener fallback on cleanup to ensure the change listener is properly removed in older Safari.
Suggested change
| if (mediaQuery) mediaQuery.removeEventListener("change", onMotionPreferenceChange) | |
| if ("removeEventListener" in mediaQuery) { | |
| mediaQuery.removeEventListener("change", onMotionPreferenceChange) | |
| } else { | |
| // @ts-expect-error legacy API | |
| mediaQuery.removeListener(onMotionPreferenceChange) | |
| } |
Member
|
Closing as stale |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implementation details
Testing
Notes
Important
AnimatedBackgroundnow respectsprefers-reduced-motion, rendering a static frame and stopping animations when reduced motion is preferred.AnimatedBackgroundrespectsprefers-reduced-motionby rendering a static frame and stoppingrequestAnimationFrameloop when reduced motion is enabled.mousemovelistener attached only when animation is enabled.(prefers-reduced-motion: reduce).startAnimation/stopAnimationhelpers ensure no RAF or mouse listeners under reduced motion.resizeCanvascontinues to redraw a static frame without animation.This description was created by
for cd07bac. You can customize this summary. It will automatically update as commits are pushed.