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

4
tests/lib.mjs
View file

@ -121,8 +121,8 @@ export async function seed(
);
}
export async function makePage(browser, { width = 390, height = 844, deviceScaleFactor = 2, reducedMotion, colorScheme } = {}) {
const context = await browser.newContext({ viewport: { width, height }, deviceScaleFactor, reducedMotion, colorScheme });
export async function makePage(browser, { width = 390, height = 844, deviceScaleFactor = 2, reducedMotion, colorScheme, isMobile, hasTouch } = {}) {
const context = await browser.newContext({ viewport: { width, height }, deviceScaleFactor, reducedMotion, colorScheme, isMobile, hasTouch });
const page = await context.newPage();
return { context, page };
}

20
tests/mobile-test.mjs
View file

@ -287,6 +287,26 @@ const AXE = axeSource();
await context.close();
}
/* 6d. touch devices blur the real backdrop (the baked layer mispaints) - */
{
const { context, page } = await makePage(browser, { width: 390, height: 844, isMobile: true, hasTouch: true });
await seed(page, { decks: [DECK], theme: "aero" });
await page.goto(BASE, { waitUntil: "networkidle" });
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 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",
JSON.stringify(glass),
);
await context.close();
}
/* 6c. a dark OS preference must not leak the dark palette into Aero ------ */
{
const { context, page } = await makePage(browser, { width: 390, height: 844, colorScheme: "dark" });