⚡ bolt: optimize scroll progress bar to prevent layout thrashing#38
⚡ bolt: optimize scroll progress bar to prevent layout thrashing#38
Conversation
Replaced animating `width` on `.scroll-progress` with `transform: scaleX()`. Animating `width` forces reflows and layout recalculations on every frame during scrolling. Using `transform` only triggers compositing, which is offloaded to the GPU. This eliminates layout thrashing.
|
👋 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. |
Deploying personal-website with
|
| Latest commit: |
7950077
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://213ce6da.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://bolt-scroll-bar-optimization.personal-website-5ns.pages.dev |
1 participant
💡 What: updated the scroll progress bar to use
transform: scaleX()instead ofwidth.🎯 Why: animating
widthcauses expensive layout reflows (layout thrashing) on every frame during scroll.transformuses gpu compositing and prevents these main-thread blocking reflows.📊 Impact: eliminates layout thrashing during scroll, ensuring a smoother 60fps scroll experience, especially on slower devices.
🔬 Measurement: observe the timeline in devtools performance tab; you will see "recalculate style" and "layout" tasks are eliminated during scroll updates.
PR created automatically by Jules for task 7080221203339076071 started by @dttdrv