fix more safari bugs (#512)

* fix more safari bugs

* another

Author: Rich-Harris

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 {

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 {

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);

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;
 			}

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;

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;
 	}

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;

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;