⚡ bolt: [performance improvement]#16
Conversation
…ransform - replaced width modification with transform: scaleX in ScrollProgress.update and updateModal methods. - updated styles.css to use width: 100%, transform: scaleX(0), and transform-origin: left. - this prevents layout thrashing (forced reflows) during scroll events.
Deploying personal-website with
|
| Latest commit: |
548b701
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7ea8a0dc.personal-website-5ns.pages.dev |
| Branch Preview URL: | https://bolt-optimize-scroll-progres-cwng.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 site’s scroll progress indicator to avoid layout-triggering style updates during scroll, aligning the implementation with compositor-friendly rendering for smoother scrolling.
Changes:
- Switched
.scroll-progressrendering fromwidthupdates totransform: scaleX()withtransform-origin: left. - Updated
ScrollProgress.update()/updateModal()to compute progress as0..1and setstyle.transformaccordingly. - Documented the performance learning/action in
.jules/bolt.md.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| styles.css | Makes the progress bar full-width and animates via transform: scaleX() instead of width. |
| script.js | Updates progress calculations and applies transform for both page scroll and modal scroll. |
| .jules/bolt.md | Adds a performance note recommending scaleX() to avoid scroll-time reflows. |
💡 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.
💡 what: updated the
.scroll-progressbar to use csstransform: scaleX()instead of modifying thewidthproperty directly.🎯 why: animating the
widthproperty triggers costly layout recalculations (reflows) on every scroll frame. animatingtransformoffloads the work to the gpu compositor, avoiding layout thrashing.📊 impact: significantly reduces main thread work during scroll events, preventing jank and ensuring a smoother 60fps scrolling experience.
🔬 measurement: profile the rendering tab in devtools. layout operations should be completely eliminated during scrolling, replaced entirely by fast composite operations.
PR created automatically by Jules for task 11448731114911931233 started by @dttdrv