⚡ bolt: [performance improvement] scaleX over width for scroll progress bar#14
⚡ bolt: [performance improvement] scaleX over width for scroll progress bar#14dttdrv wants to merge 1 commit into
Conversation
Deploying personal-website with
|
| Latest commit: |
7009bcb
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://efe087fc.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://bolt-scroll-progress-optimiz.personal-website-5ns.pages.dev |
|
👋 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. |
There was a problem hiding this comment.
Pull request overview
Updates the scroll progress bar implementation to avoid layout thrashing during scroll by switching from width updates to a composited transform: scaleX() approach, aligning with existing performance patterns in the codebase.
Changes:
- Update
.scroll-progressCSS to usewidth: 100%+transform: scaleX(0)withtransform-origin: left. - Update
ScrollProgress.update()andupdateModal()to setstyle.transform = scaleX(progress)instead ofstyle.width. - Document the performance learning/action in
.jules/bolt.md.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| styles.css | Switch progress bar rendering from width to transform: scaleX() and update transition accordingly. |
| script.js | Update scroll progress computations to write transform: scaleX(...) instead of width. |
| .jules/bolt.md | Add a perf note capturing the transform-over-width guidance for scroll progress. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| const docHeight = document.documentElement.scrollHeight - window.innerHeight; | ||
| const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; | ||
| this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`; | ||
| // use transform: scalex instead of width to prevent layout thrashing |
| const scrollHeight = this.modalContent.scrollHeight - this.modalContent.clientHeight; | ||
| const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0; | ||
| this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`; | ||
| // use transform: scalex instead of width to prevent layout thrashing |
💡 what: changed the scroll progress bar animation to use
transform: scaleX()andtransform-origin: leftinstead of animating thewidthproperty.🎯 why: animating
widthcauses the browser to recalculate the layout (reflow) and repaint on every frame, causing performance jank during scrolling.transformanimations are offloaded to the gpu and avoid layout thrashing.📊 impact: significantly reduces main thread work and layout recalculation time during scrolling. eliminates forced synchronous layouts from the progress bar update loop.
🔬 measurement: tested by scrolling the page and verifying that the scroll progress bar still accurately reflects the scroll position without causing layout thrashing.
PR created automatically by Jules for task 16377729738851285388 started by @dttdrv