diff options
| author | Adam Soltys <[email protected]> | 2026-09-02 12:11:12 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-02 12:11:12 -0700 |
| commit | 92594d6b1290c4985c33276cf5203ace2c5d6c61 (patch) | |
| tree | 095339bb56f056e70d5c9f49d214c06f4c5d7ceb /src/style.css | |
| parent | d991ec192c5b6b00e1ce75aa5717fd85390aa39e (diff) | |
| download | coinosv3-92594d6b1290c4985c33276cf5203ace2c5d6c61.tar.gz coinosv3-92594d6b1290c4985c33276cf5203ace2c5d6c61.zip | |
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
Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 9 |
1 files changed, 7 insertions, 2 deletions
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 |