From f4026d3e55cbcca2f8144755be351761aa2f371a Mon Sep 17 00:00:00 2001 From: Martin Dvorak Date: Tue, 13 Oct 2026 06:56:21 +0000 Subject: [PATCH] Fix the liquid-glass blur (minifier drops hand-written backdrop-filter) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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.) --- app/globals.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/globals.css b/app/globals.css index a262978..613d6b6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -359,8 +359,8 @@ border-radius: 0.75rem; background: var(--glass-bg); border: 1px solid var(--glass-border); - backdrop-filter: blur(8px) saturate(1.4); - -webkit-backdrop-filter: blur(8px) saturate(1.4); + /* Same trap as the buttons above: use the Tailwind utilities. */ + @apply backdrop-blur-md backdrop-saturate-150; } /* Liquid glass buttons: translucent, glossed top half, bright rim — the @@ -379,8 +379,10 @@ border: 1px solid rgb(255 255 255 / 0.9); 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); - backdrop-filter: blur(10px) saturate(1.5); - -webkit-backdrop-filter: blur(10px) saturate(1.5); + /* @apply, not a hand-written backdrop-filter: the minifier keeps only the + -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