From 608f2eda2f03dc22715da806055b8b86eda60e79 Mon Sep 17 00:00:00 2001 From: Davide Grilli Date: Sat, 5 Sep 2026 14:52:51 +0200 Subject: [PATCH] Rende il materiale della barra coerente fra WebKit e Blink MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A parità di CSS la barra sembrava piena su Safari e trasparente su Chrome Android. Il colore di fondo era lo stesso sui due: la differenza veniva tutta dal blur. WebKit rende `backdrop-filter: blur()` molto più denso e "latteo" di Blink, e `saturate(180%)` amplificava lo scarto — con un fondo al 72% l'aspetto dipendeva quasi solo dal filtro, cioè dalla parte su cui i due motori non sono d'accordo. Il materiale ora si regge sul colore (85%) e usa il blur come rifinitura: la profondità resta, la differenza fra i due motori quasi sparisce perché pesa molto meno. `saturate` scende a 150% per la stessa ragione. `color-mix` passa da `in oklab` a `in srgb`: mescolare con `transparent`, che è nero con alpha 0, dipende da come il motore premoltiplica, e in srgb è implementato in modo molto più uniforme. Co-Authored-By: Claude Opus 5 --- src/styles.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/styles.css b/src/styles.css index b90f690..c0b523d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -358,10 +358,24 @@ * cui il contenuto scorre, con una sfumatura al bordo al posto della linea * netta (scroll edge effect). */ +/* + * Il materiale deve reggersi sul colore, non sul blur. + * + * Con un fondo poco denso (era 72%) l'aspetto dipendeva quasi tutto da + * `backdrop-filter`, ed è lì che i due motori divergono: WebKit sfoca in modo + * molto più denso e "latteo" di Blink, e `saturate` amplifica lo scarto. Il + * risultato era una barra che su Safari sembrava piena e su Chrome Android + * trasparente, a parità di CSS. A 85% il colore fa il lavoro e il blur è la + * rifinitura: resta la profondità, sparisce quasi tutta la differenza. + * + * `in srgb` e non `in oklab`: mescolare con `transparent` — che è nero con + * alpha 0 — dipende da come il motore premoltiplica, e in srgb è implementato + * in modo molto più uniforme. + */ @utility materiale { - background-color: color-mix(in oklab, var(--color-card) 72%, transparent); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); + background-color: color-mix(in srgb, var(--color-card) 85%, transparent); + backdrop-filter: blur(20px) saturate(150%); + -webkit-backdrop-filter: blur(20px) saturate(150%); } /*