dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Phones get flat glass: no live blur, no baked layer

Browse source 
The touch fallback from 0.3.8 (a real backdrop-filter over the live
scene) was 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, and the hand-rolled activity fills keep their own
tints - transparent glass at zero per-frame cost. Desktop keeps the
baked blur.

tests/mobile-test.mjs pins the flat contract (no baked layer, no
backdrop-filter on a card) with a touch context: 124/124.
Contrast 0 findings, axe clean, chat 101/101, regression 44/44, i18n
13/13, native 33/33. Version 0.3.9, SW -> freezmo-v68.
This commit is contained in:
Martin Dvořák 2026-10-13 15:57:46 +00:00
commit 2b78dcf0d1
5 changed files with 29 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -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

29
app/globals.css
View file

@ -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 {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "freezmo",
"version": "0.3.8",
"version": "0.3.9",
"private": true,
"license": "GPL-3.0-only",
"scripts": {

2
public/sw.js
View file

@ -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`;

6
tests/mobile-test.mjs
View file

@ -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();