From d9f2a2770000049f7e93c6afc72ab794254b44a6 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 7 Apr 2026 21:46:02 +0200
Subject: [PATCH] fix: restore backdrop-filter blur in production builds

Lightning CSS was deduplicating manually written backdrop-filter +
-webkit-backdrop-filter to just the webkit version, breaking blur on
Firefox. Remove manual webkit prefixes and let Lightning CSS auto-prefix
via browser targets in vite.config.ts.
---
 package.json                                          |  2 +-
 src/lib/components/Header.svelte                      |  1 -
 .../[active=fitnessActive]/+page.svelte               | 11 ++++-------
 vite.config.ts                                        |  9 +++++++++
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 9ab09b9..c97f059 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.6.0",
+	"version": "1.6.1",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 775cfc8..e43c544 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -57,7 +57,6 @@ nav {
 	border-radius: 100px;
 	background: var(--nav-bg, rgba(46, 52, 64, 0.82));
 	backdrop-filter: blur(16px);
-	-webkit-backdrop-filter: blur(16px);
 	border: 1px solid var(--nav-border, rgba(255,255,255,0.08));
 	box-shadow: 0 4px 24px var(--nav-shadow, rgba(0,0,0,0.25));
 	view-transition-name: site-header;
diff --git a/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte b/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
index 27d2582..b2030a9 100644
--- a/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
+++ b/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
@@ -2031,7 +2031,7 @@
 	.gps-overlay .vg-panel {
 		background: rgba(46, 52, 64, 0.82);
 		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
+
 		border: 1px solid rgba(255,255,255,0.12);
 		border-radius: 10px;
 		padding: 0.6rem;
@@ -2099,7 +2099,6 @@
 		padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
 		background: var(--nav-bg, rgba(46, 52, 64, 0.82));
 		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
 		border-top: 1px solid var(--nav-border, rgba(255,255,255,0.08));
 		box-shadow: 0 -4px 24px var(--nav-shadow, rgba(0,0,0,0.25));
 		color: var(--nav-text-active, #fff);
@@ -2132,7 +2131,6 @@
 	.gps-overlay-prestart {
 		background: none !important;
 		backdrop-filter: none !important;
-		-webkit-backdrop-filter: none !important;
 		border-top: none !important;
 		box-shadow: none !important;
 	}
@@ -2174,7 +2172,7 @@
 		padding: 0.65rem 0.5rem;
 		background: rgba(46, 52, 64, 0.82);
 		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
+
 		border: 1px solid rgba(255,255,255,0.12);
 		border-radius: 10px;
 		cursor: pointer;
@@ -2210,7 +2208,7 @@
 		padding: 0.55rem 0.75rem;
 		background: rgba(46, 52, 64, 0.82);
 		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
+
 		border: 1px solid rgba(255,255,255,0.12);
 		border-radius: 8px;
 		cursor: pointer;
@@ -2323,7 +2321,7 @@
 	.interval-panel {
 		background: rgba(46, 52, 64, 0.82);
 		backdrop-filter: blur(8px);
-		-webkit-backdrop-filter: blur(8px);
+
 		border: 1px solid rgba(255,255,255,0.12);
 		border-radius: 10px;
 		padding: 0.6rem;
@@ -2419,7 +2417,6 @@
 		z-index: 100;
 		background: rgba(46, 52, 64, 0.95);
 		backdrop-filter: blur(12px);
-		-webkit-backdrop-filter: blur(12px);
 		display: flex;
 		flex-direction: column;
 		overflow-y: auto;
diff --git a/vite.config.ts b/vite.config.ts
index ddce16c..54067f9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,6 +2,15 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+	css: {
+		lightningcss: {
+			targets: {
+				chrome: (80 << 16),
+				firefox: (80 << 16),
+				safari: (14 << 16),
+			}
+		}
+	},
 	server: {
 		allowedHosts: ["bocken.org"]
 	},