diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
index 00cca21588..a27237f04e 100644
--- a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -284,7 +284,7 @@
 
 	li.selected {
 		filter: drop-shadow(1px 2px 4px hsla(205.7, 63.6%, 30.8%, 0.1));
-		-webkit-transform: translate3d(0, 0, 0);
+		-webkit-transform: var(--safari-fix);
 	}
 
 	li.selected input {
diff --git a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
index 45531686bc..e65266f242 100644
--- a/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
+++ b/apps/svelte.dev/src/routes/_home/Supporters/index.svelte
@@ -97,7 +97,7 @@
 		background: no-repeat;
 		background-size: auto 102%;
 		filter: grayscale(1) opacity(0.7);
-		-webkit-transform: translate3d(0, 0, 0);
+		-webkit-transform: var(--safari-fix);
 	}
 
 	.supporter:hover {
diff --git a/apps/svelte.dev/src/routes/_home/Testimonials.svelte b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
index 09b5d758e4..bab2635cd3 100644
--- a/apps/svelte.dev/src/routes/_home/Testimonials.svelte
+++ b/apps/svelte.dev/src/routes/_home/Testimonials.svelte
@@ -128,7 +128,7 @@
 			border-radius: var(--sk-border-radius);
 			filter: grayscale(1);
 			transition: filter 0.2s;
-			-webkit-transform: translate3d(0, 0, 0.01);
+			-webkit-transform: var(--safari-fix);
 
 			a:hover & {
 				filter: grayscale(0);
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
index 469f6dc218..6de7d82003 100644
--- a/apps/svelte.dev/src/routes/docs/+page.svelte
+++ b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -119,7 +119,7 @@
 			background-color: var(--sk-back-2);
 			filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1));
 			text-decoration: none;
-			-webkit-transform: translate3d(0, 0, 0);
+			-webkit-transform: var(--safari-fix);
 			h2 {
 				text-decoration: underline;
 			}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
index 569136f33b..bc3ddd28d5 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -194,7 +194,7 @@
 		border-top: 1px solid var(--sk-text-4);
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
-		-webkit-transform: translate3d(0, 100%, 0);
+		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
 		backdrop-filter: blur(3px);
 		overflow-y: auto;
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
index c397cbcb87..0b1ad018e2 100644
--- a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -78,7 +78,7 @@
 		background: var(--sk-back-1);
 		border-top: 1px solid var(--sk-text-4);
 		transform: translate(0, 100%);
-		-webkit-transform: translate3d(0, 100%, 0);
+		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
 		overflow-y: auto;
 	}
diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte
index dd2a95ed06..841811ee08 100644
--- a/packages/site-kit/src/lib/components/Dropdown.svelte
+++ b/packages/site-kit/src/lib/components/Dropdown.svelte
@@ -35,7 +35,7 @@
 		filter: var(--sk-shadow);
 		border-radius: var(--sk-border-radius);
 		z-index: 999;
-		-webkit-transform: translate3d(0, 0, 0);
+		-webkit-transform: var(--safari-fix);
 
 		&.align-right {
 			left: auto;
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index d3b2eb87c6..84ed81e506 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -123,6 +123,10 @@
 	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
 	--sk-raised-active-width: 2px 1px 1px 2px;
 
+	/* this is necessary for elements with filters on safari, because safari is a uniquely awful piece of software.
+	   the 0.01 prevents Vite from optimising it to `translate(0, 0)`, which doesn't fix anything */
+	--safari-fix: translate3d(0, 0, 0.01);
+
 	&.dark {
 		color-scheme: dark;
 		-webkit-font-smoothing: antialiased;