From ba789e03fa345720be2f5ad3870fea5b2e172537 Mon Sep 17 00:00:00 2001 From: gavriel-m Date: Mon, 31 Aug 2026 16:22:23 +0300 Subject: [PATCH] fix(tour): declare the backdrop's vendor prefix before its standard property MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `.tip-magic-tour-backdrop` wrote `backdrop-filter` first and `-webkit-backdrop-filter` second. Nothing here shows the problem: this package ships its CSS unminified, so both survive and every browser picks the one it understands. A consumer whose build minifies CSS is a different story. A minifier that folds an alias and its standard property into one keeps the last one written, so that order ships the ALIAS ALONE — and Chrome no longer recognises it (`CSS.supports('-webkit-backdrop-filter', 'blur(4px)')` is false as of 152). The rule then computes `backdrop-filter: none`: a tour backdrop that dims the page but blurs nothing, which reads as broken rather than as a spotlight. Found in a downstream app whose production bundle had exactly this, while dev was correct. Swapping the two lines and rebuilding restores the standard property in the minified output; reverting loses it again. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_0197yar67v2FaNevznSor91E --- src/styles/tour.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/tour.css b/src/styles/tour.css index a253123..fd41a16 100644 --- a/src/styles/tour.css +++ b/src/styles/tour.css @@ -345,8 +345,10 @@ inset: 0; z-index: var(--tip-magic-tour-backdrop-z-index); background: var(--tip-magic-tour-backdrop-bg); - backdrop-filter: blur(var(--tip-magic-tour-backdrop-blur)); + /* Prefix first: a minifier that folds the two into one property keeps the LAST, and a bundle + carrying only the alias no longer blurs in Chrome, which dropped it. */ -webkit-backdrop-filter: blur(var(--tip-magic-tour-backdrop-blur)); + backdrop-filter: blur(var(--tip-magic-tour-backdrop-blur)); pointer-events: none; /* Allow clicks through to target */ }