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

Fix the liquid-glass blur (minifier drops hand-written backdrop-filter)

Browse source 
The aero button and hint-chip rules hand-wrote backdrop-filter next to the
-webkit- prefix; the minifier keeps only the -webkit- one, which paints
nothing in Chrome — the same trap decision 19 documents. Both now use
@apply backdrop-blur-*, so the glass actually blurs the wallpaper behind it:
segment blur(16px) saturate(1.5), hint chip blur(12px) saturate(1.5).

(Version stays 0.2.2 — same task.)
This commit is contained in:
Martin Dvořák 2026-10-13 06:56:21 +00:00
commit f4026d3e55
1 changed files with 6 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/globals.css
View file

@ -359,8 +359,8 @@
border-radius: 0.75rem; border-radius: 0.75rem;
background: var(--glass-bg); background: var(--glass-bg);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
backdrop-filter: blur(8px) saturate(1.4); /* Same trap as the buttons above: use the Tailwind utilities. */
-webkit-backdrop-filter: blur(8px) saturate(1.4); @apply backdrop-blur-md backdrop-saturate-150;
} }
/* Liquid glass buttons: translucent, glossed top half, bright rim — the /* Liquid glass buttons: translucent, glossed top half, bright rim — the
@ -379,8 +379,10 @@
border: 1px solid rgb(255 255 255 / 0.9); border: 1px solid rgb(255 255 255 / 0.9);
color: #05243d; color: #05243d;
box-shadow: 0 10px 24px -14px rgb(2 62 110 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.98), inset 0 -8px 14px -10px rgb(255 255 255 / 0.7); box-shadow: 0 10px 24px -14px rgb(2 62 110 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.98), inset 0 -8px 14px -10px rgb(255 255 255 / 0.7);
backdrop-filter: blur(10px) saturate(1.5); /* @apply, not a hand-written backdrop-filter: the minifier keeps only the
-webkit-backdrop-filter: blur(10px) saturate(1.5); -webkit- prefix of a hand-written one, which paints nothing (see decision
19). This is what makes the buttons read as liquid glass. */
@apply backdrop-blur-lg backdrop-saturate-150;
} }
/* The glass itself, a touch more transparent so the wallpaper reads through /* The glass itself, a touch more transparent so the wallpaper reads through