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

Touch devices blur the live backdrop instead of the baked layer

Browse source 
Mobile engines repaint background-attachment: fixed late (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
click it". On touch devices (max-width 639px or pointer: coarse) the
bake is dropped for a real backdrop-filter over the live scene, so the
bubbles blur through the glass as they pass and the position is correct
by construction. Hand-rolled frost fills keep their own tints there;
desktop keeps the baked layer (measured cheaper and verified correct).

Pinned with a touch-context check in the mobile suite (124 checks).
Contrast 0 findings, axe clean, chat 101/101, regression 44/44, i18n
13/13, native 33/33. Version 0.3.8, SW -> freezmo-v67.
This commit is contained in:
Martin Dvořák 2026-10-13 14:07:24 +00:00
commit b315e2a1aa
6 changed files with 84 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

51
app/globals.css
View file

@ -597,6 +597,57 @@
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). */
@media (max-width: 639px), (pointer: coarse) {
.aero .card,
.aero .glass-solid,
.aero .sidebar-surface,
.aero .gate-card,
.aero .list-group,
.aero .nav-action,
.aero .nav-row[aria-current="page"],
.aero .nav-row[data-active="true"],
.aero .glass-chip,
.aero .glass-pill,
.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 {
background-image: none;
@apply backdrop-blur-md backdrop-saturate-[1.4];
}
.aero .chat-bubble,
.aero .chat-answer {
background-color: rgb(255 255 255 / 0.55);
}
.aero .tabbar {
background-image: none;
}
/* The hand-rolled frost fills drop the bake too and keep their own tints. */
.aero [class*="bg-white/35"],
.aero [class*="bg-white/40"],
.aero [class*="bg-white/45"],
.aero [class*="bg-white/50"],
.aero [class*="bg-white/55"],
.aero [class*="bg-white/60"],
.aero [class*="bg-white/70"],
.aero [class*="bg-[var(--surface)]"],
.aero [class*="bg-[var(--surface-strong)]"],
.aero [class*="bg-frost-50"] {
background-image: none;
}
}
/* Inside a sheet or dialog the backdrop is not the raw scene — a scrim and a
more opaque sheet glass sit in between — so the viewport-aligned frosted
layer would not match what is actually behind the element (it showed the