From 8a600420b55418f529d3c0f716445596319fc267 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Sat, 1 Feb 2025 08:39:09 +0100
Subject: [PATCH] Set perspective-origin directly

Workaround issue in Safari where setting the perspective origin using a
var() expression for one of the axes does not apply correctly causing
the 3d parallax effect to be lost.
---
 web/style.css   | 1 -
 web/viewport.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/style.css b/web/style.css
index 1300097..47b3f38 100644
--- a/web/style.css
+++ b/web/style.css
@@ -72,7 +72,6 @@ ol, ul {
 .viewport {
 	pointer-events: none;
 	perspective: 300vmax;
-	perspective-origin: 50% var(--y-offset);
 }
 .viewport * {
 	pointer-events: initial;
diff --git a/web/viewport.js b/web/viewport.js
index 158cabb..a61d374 100644
--- a/web/viewport.js
+++ b/web/viewport.js
@@ -65,7 +65,7 @@ function setViewportOffset(viewport, windowHeight) {
 		)
 	);
 	const yOffset = origin - viewportRect.top;
-	viewport.style.setProperty('--y-offset', yOffset + "px");
+	viewport.style.setProperty('perspective-origin', `50% ${yOffset}px`);
 }
 
 const viewports = document.querySelectorAll(".viewport");