diff --git a/README.md b/README.md index 72340bf..5181ec6 100644 --- a/README.md +++ b/README.md @@ -1411,6 +1411,15 @@ Things I chose while building, with the reasoning: pre-blurred wallpaper — the scene is clearly visible through the glass, and the pixel-contrast scan still passes. +74. **Phones get flat glass, not live blur.** The touch fallback from 73 (a real backdrop blur + over the live scene) turned out to be the wrong trade: every pane re-blurs on every frame + while the bubbles animate, and phones choke — input lag, "buttons take ages to respond". Touch + devices now drop both the bake (which mispaints there) *and* the live blur: the panes keep the + thin Ask-pill tint over the sharp scene (the hand-rolled activity fills keep their own tints), + i.e. transparent glass at zero per-frame cost. Desktop keeps the baked blur — the same look as + the phones had, without the GPU bill. `tests/mobile-test.mjs` pins the flat contract (no baked + layer, no backdrop-filter on a card) with a touch context. + 73. **Touch devices blur the live backdrop; desktop keeps the bake.** Mobile engines repaint `background-attachment: fixed` late (and iOS treats it as scroll), so the baked glass showed a stale crop of the wallpaper until a tap forced a repaint — "some of the UI looks bugged until I diff --git a/app/globals.css b/app/globals.css index 67060f6..7a9531b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -597,13 +597,14 @@ background-repeat: no-repeat, no-repeat; } -/* Touch devices: the baked backdrop is `background-attachment: fixed`, which - mobile engines repaint late (and iOS treats as scroll) — panes showed a - stale crop of the wallpaper until a tap forced a repaint ("some UI looks - bugged until I click it"). Touch hardware has the GPU budget for the honest - version instead: a real backdrop blur over the live scene, so the bubbles - blur through the glass as they pass. Desktop keeps the bake (measured - cheaper there, and verified correct). */ +/* Touch devices: flat glass, no bake and no live blur. The baked layer is + `background-attachment: fixed`, which mobile engines repaint late (iOS + treats it as scroll) — panes showed a stale crop until a tap forced a + repaint. The honest alternative (a real backdrop-filter) is worse: every + pane re-blurs on every frame while the bubbles animate, and phones choke — + measured as input lag, "buttons take ages to respond". So on touch the + panes keep the thin Ask-pill tint over the sharp scene: transparent glass + at zero per-frame cost. Desktop keeps the baked blur. */ @media (max-width: 639px), (pointer: coarse) { .aero .card, .aero .glass-solid, @@ -618,16 +619,18 @@ .aero .btn-secondary, .aero .btn-primary, .aero .grad-ice, - .aero .segmented, - .aero .segmented > button[aria-pressed="true"], - .aero .segmented > a[aria-current="page"], - .aero .chat-bubble, - .aero .chat-answer { + .aero .segmented { background-image: none; - @apply backdrop-blur-md backdrop-saturate-[1.4]; + background-color: rgb(255 255 255 / 0.32); + } + .aero .segmented > button[aria-pressed="true"], + .aero .segmented > a[aria-current="page"] { + background-image: none; + background-color: rgb(255 255 255 / 0.45); } .aero .chat-bubble, .aero .chat-answer { + background-image: none; background-color: rgb(255 255 255 / 0.55); } .aero .tabbar { diff --git a/package.json b/package.json index 0b287c9..8f66078 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freezmo", - "version": "0.3.8", + "version": "0.3.9", "private": true, "license": "GPL-3.0-only", "scripts": { diff --git a/public/sw.js b/public/sw.js index 1ffe03c..95402dc 100644 --- a/public/sw.js +++ b/public/sw.js @@ -9,7 +9,7 @@ * * Bumping CACHE_VERSION is how a new deploy invalidates old assets. */ -const CACHE_VERSION = "freezmo-v67"; +const CACHE_VERSION = "freezmo-v68"; const SHELL_CACHE = `${CACHE_VERSION}-shell`; const ASSET_CACHE = `${CACHE_VERSION}-assets`; diff --git a/tests/mobile-test.mjs b/tests/mobile-test.mjs index 398b890..ad4ef41 100644 --- a/tests/mobile-test.mjs +++ b/tests/mobile-test.mjs @@ -295,13 +295,13 @@ const AXE = axeSource(); await page.waitForTimeout(1000); const glass = await page.evaluate(() => { const coarsish = matchMedia("(pointer: coarse)").matches || matchMedia("(max-width: 639px)").matches; - const el = document.querySelector(".segmented"); + const el = document.querySelector(".card"); const cs = getComputedStyle(el); return { coarsish, backdrop: cs.backdropFilter, image: cs.backgroundImage }; }); check( - "theme: touch glass blurs the live backdrop (no baked layer)", - glass.coarsish && glass.backdrop.includes("blur") && glass.image === "none", + "theme: touch glass is flat (no bake, no per-frame blur)", + glass.coarsish && glass.backdrop === "none" && glass.image === "none", JSON.stringify(glass), ); await context.close();