perf: run the spectrum-slide animation only while the gradient is visible - #8296
Open
ankur-arch wants to merge 1 commit into
Open
ankur-arch wants to merge 1 commit into
ankur-arch wants to merge 1 commit into
Conversation
…ible `spectrum-slide` animates `background-position`, which the browser cannot composite, so every element carrying it repaints on every frame. The ring, ink, ink-text and underline rules attached the animation to the resting state and hid it with `opacity: 0`, which stops the pixels but not the work. On the docs sidebar every row (40+ on an ORM page) ran it at once, and the homepage ran it on 37 buttons and links, which is the sustained idle CPU reported in #8209. The animation now starts on the same selector that reveals the gradient (hover, focus-visible, `data-active`, or the `-on` variant) and the reduced-motion blocks cover those selectors too, so the visual is the same while shown and nothing animates at rest. Closes #8209 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Essentials Run ID: 📒 Files selected for processing (2)
Included review availability: 2 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour. WalkthroughSpectrum animations in both style sheets now run only for visible hover, focus-visible, selected, or always-on states. Reduced-motion rules cover the added selectors, including sidebar and tile rings. ChangesSpectrum animation gating
Priority: ⬆️ High Estimated code review effort: 2 (Simple) | ~15 minutes Change: Bug fix · Severity of issue fixed: High Suggested reviewers: Merge Risk: ⚪ Minimal · up to The animation gating preserves visible interaction states and reduced-motion coverage while removing idle repaint work. No merge-blocking issue is identified. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Fixes #8209.
spectrum-slideanimatesbackground-position, which the browser cannot composite, so every element carrying it repaints on every frame. The ring, ink, ink-text and underline rules attached the animation to the resting state and hid it withopacity: 0, which hides the pixels but not the work. The docs sidebar ran it on every row and the homepage on every ghost, link and outline button.The animation now starts on the same selector that reveals the gradient (hover, focus-visible,
data-active, or the-onvariant), and the reduced-motion blocks cover those selectors too. While a gradient is shown it looks the same as before; at rest nothing animates.Same change in
apps/site/src/app/globals.cssandpackages/eclipse/src/styles/globals.css(the copy the docs and blog use).Validation
Reproduced in Chrome with
document.getAnimations()before the change:spectrum-slideanimations running at idleAfter the change (local dev servers): the docs page runs 1 (the selected sidebar row) and the homepage runs 1 (the
spectrum-border-onelement). Hover and focus still start the slide.🤖 Generated with Claude Code
Summary by CodeRabbit
Style
Accessibility