⚡ Optimize CSS animation to prevent layout thrashing #407
Conversation
Refactors the subtitle swap animation to use multiple spans and opacity/visibility toggles instead of animating the `content` property. This prevents layout recalculations (layout thrashing) on every frame of the text change, pushing the work to the compositor thread. Changes: - Updates `index.html` to include all text options as spans. - Updates `src/style.css` to stack spans with CSS Grid and animate opacity. - Adds regression test `tests/animation-verification.spec.ts`. Co-authored-by: xRahul <1639945+xRahul@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
💡 What:
Refactored the text swap animation in
src/style.cssandindex.html. Instead of using a pseudo-element (::before) and animating thecontentproperty, I implemented a solution using multiple<span>elements stacked on top of each other using CSS Grid (display: grid; place-items: center). The animation now cycles through these elements by toggling theiropacityandvisibilityproperties.🎯 Why:
The previous implementation animated the
contentproperty. Changingcontentforces the browser to recalculate the layout (reflow) and repaint the page, which is an expensive operation known as "layout thrashing." By usingopacity(andvisibility), the animation logic is offloaded to the compositor thread (mostly) and avoids layout shifts, resulting in smoother performance and lower CPU usage.📊 Measured Improvement:
content(Layout trigger) toopacity(Composite trigger) is a known performance win.tests/animation-verification.spec.tsto ensure the new DOM structure is correctly rendered. All existing tests passed. Verified visually with screenshots.PR created automatically by Jules for task 3608634246665415621 started by @xRahul