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

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 {