From 92594d6b1290c4985c33276cf5203ace2c5d6c61 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 2 Sep 2026 12:11:12 -0700 Subject: Tabs answer the finger, not the click: switching happens on pointerdown (the click event lands 100-250ms after the touch, and a tab has no scroll ambiguity to wait out — keyboard activation keeps the click path), every button takes touch-action:manipulation so double-tap-zoom arbitration stops taxing quick taps, and the sliding pane pre-promotes to its own compositor layer — a slow mid-slide re-render was letting Chrome expose unpainted gray tiles at the viewport edges 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 | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index b978519..bb0951b 100644 --- a/src/style.css +++ b/src/style.css @@ -168,6 +168,8 @@ button, .btn { font: inherit; font-weight: 600; cursor: pointer; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); padding: 11px 16px; transition: filter .12s, background .12s, border-color .12s; + /* no double-tap-zoom arbitration: taps commit immediately on mobile */ + touch-action: manipulation; } button:hover { background: var(--surface2); } button:active { transform: translateY(1px); } @@ -583,8 +585,11 @@ body::after { /* tab carousel: only the content pane moves, with a soft cross-fade */ @keyframes tab-in-left { from { opacity: .2; transform: translateX(26px); } } @keyframes tab-in-right { from { opacity: .2; transform: translateX(-26px); } } -.anim-tab-left { animation: tab-in-left .26s cubic-bezier(.25, .8, .35, 1) both; } -.anim-tab-right { animation: tab-in-right .26s cubic-bezier(.25, .8, .35, 1) both; } +/* will-change promotes the sliding pane to its own compositor layer BEFORE + the animation's first frame — without it, a slow re-render mid-slide let + Chrome expose unpainted tiles (gray strips) at the viewport edges */ +.anim-tab-left { animation: tab-in-left .26s cubic-bezier(.25, .8, .35, 1) both; will-change: transform, opacity; } +.anim-tab-right { animation: tab-in-right .26s cubic-bezier(.25, .8, .35, 1) both; will-change: transform, opacity; } /* ---- onboarding wizard + tour ---- */ /* width:100%, not just max-width: with auto margins the flex item doesn't -- cgit v1.2.3