fix: restore backdrop-filter in prod by dropping -webkit- prefix

LightningCSS was stripping unprefixed backdrop-filter when both
properties were present, breaking Firefox desktop. Removing the
-webkit- prefix lets LightningCSS auto-add it and keep the standard
property, giving both in the bundle.
This commit is contained in:
2026-06-07 22:09:08 +02:00
parent a75eb92a9c
commit 425376874c

View File

@@ -88,7 +88,6 @@
/* ── Background treatment ─────────────────────────────────────── */ /* ── Background treatment ─────────────────────────────────────── */
body { body {
background: url("./assets/background2.webp") center / cover no-repeat fixed;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
} }
@@ -96,28 +95,35 @@ body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.2); background: url("./assets/background2.webp") center / cover no-repeat;
z-index: 0; z-index: -2;
pointer-events: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: -1;
pointer-events: none; pointer-events: none;
} }
body > #root { body > #root {
position: relative; position: relative;
z-index: 1; z-index: 0;
} }
/* ── Utility classes ──────────────────────────────────────────── */ /* ── Utility classes ──────────────────────────────────────────── */
@utility glass { @utility glass {
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: var(--aero-glass-bg); background: var(--aero-glass-bg);
border: 1px solid var(--aero-glass-border); border: 1px solid var(--aero-glass-border);
} }
@utility glass-card { @utility glass-card {
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: var(--aero-glass-bg); background: var(--aero-glass-bg);
border: 1px solid var(--aero-glass-border); border: 1px solid var(--aero-glass-border);
box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset); box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset);
@@ -127,7 +133,6 @@ body > #root {
@utility glass-heavy { @utility glass-heavy {
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
background: rgba(0, 0, 0, 0.55); background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
} }
@@ -174,7 +179,6 @@ body > #root {
[data-slot="card"] { [data-slot="card"] {
background: var(--aero-glass-bg); background: var(--aero-glass-bg);
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: var(--aero-glass-border); border-color: var(--aero-glass-border);
box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset); box-shadow: var(--aero-glass-shadow), var(--aero-glass-inset);
--tw-ring-color: transparent; --tw-ring-color: transparent;
@@ -184,13 +188,11 @@ body > #root {
[data-slot="dialog-overlay"] { [data-slot="dialog-overlay"] {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
[data-slot="dialog-content"] { [data-slot="dialog-content"] {
background: rgba(20, 20, 30, 0.8); background: rgba(20, 20, 30, 0.8);
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);
--tw-ring-color: transparent; --tw-ring-color: transparent;
--tw-ring-shadow: none; --tw-ring-shadow: none;
@@ -199,13 +201,11 @@ body > #root {
[data-slot="sheet-overlay"] { [data-slot="sheet-overlay"] {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
[data-slot="sheet-content"] { [data-slot="sheet-content"] {
background: rgba(20, 20, 30, 0.85); background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
} }
@@ -291,7 +291,6 @@ body > #root {
[data-slot="button"][data-variant="destructive"] { [data-slot="button"][data-variant="destructive"] {
background: rgba(200, 60, 60, 0.65); background: rgba(200, 60, 60, 0.65);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(220, 80, 80, 0.3); border: 1px solid rgba(220, 80, 80, 0.3);
} }
@@ -305,20 +304,17 @@ body > #root {
[data-slot="drawer-content"] { [data-slot="drawer-content"] {
background: rgba(20, 20, 30, 0.9); background: rgba(20, 20, 30, 0.9);
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
} }
[data-slot="drawer-overlay"] { [data-slot="drawer-overlay"] {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
/* Sonner toast */ /* Sonner toast */
[data-sonner-toaster] [data-sonner-toast] { [data-sonner-toaster] [data-sonner-toast] {
background: rgba(20, 20, 30, 0.85); background: rgba(20, 20, 30, 0.85);
backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
-webkit-backdrop-filter: blur(var(--aero-blur));
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
color: oklch(0.985 0 0); color: oklch(0.985 0 0);
} }