From 3b65462549269e3895345919b51164e017bcd13d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 3 Sep 2026 21:20:46 -0700 Subject: The balance carousel stops stuttering during boot: the post-render alignment no longer reads layout (offsetLeft/scrollLeft) on every one of the many boot renders — an _alignedTo guard short-circuits before any layout touch once the card is in place, and the scroll's own settle marks itself aligned so it never re-aligns behind the user. The pass moved to rAF, and each slide gets layout containment so the history list building in below can't force it to reflow mid-scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr --- src/style.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index e5c3156..e846f52 100644 --- a/src/style.css +++ b/src/style.css @@ -462,7 +462,17 @@ hr.divider { margin: 16px 0; } touch-action: pan-x pan-y; } .bal-carousel::-webkit-scrollbar { display: none; } -.bal-slide { flex: 0 0 calc(100% - 40px); scroll-snap-align: center; min-width: 0; } +/* Isolate each card's layout + paint from the rest of the page: the history + list building in below (and the balance number ticking) can't invalidate + the carousel's layer, and the scroll stays on the compositor even while the + main thread is busy with boot work. */ +.bal-slide { + flex: 0 0 calc(100% - 40px); scroll-snap-align: center; min-width: 0; + /* layout containment (not paint — that would clip the card's own shadow): + the history list building in below and the balance ticking can't force + the slide to reflow, so the scroll stays on the compositor during boot */ + contain: layout; +} .bal-carousel .card + .card { margin-top: 0; } .bal-carousel { cursor: grab; } /* touch never shows a cursor — no media-query hedging */ .bal-carousel.grabbing, .bal-carousel.grabbing * { cursor: grabbing; user-select: none; } -- cgit v1.2.3