public/hornwitser.no
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set perspective-origin directly

Browse source 
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.
This commit is contained in:
Hornwitser 2025-02-01 08:39:09 +01:00
parent e5ba70d6a9
commit 8a600420b5
2 changed files with 1 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/style.css
View file

@ -72,7 +72,6 @@ ol, ul {
.viewport { .viewport {
pointer-events: none; pointer-events: none;
perspective: 300vmax; perspective: 300vmax;
perspective-origin: 50% var(--y-offset);
} }
.viewport * { .viewport * {
pointer-events: initial; pointer-events: initial;

2
web/viewport.js
View file

@ -65,7 +65,7 @@ function setViewportOffset(viewport, windowHeight) {
) )
); );
const yOffset = origin - viewportRect.top; 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"); const viewports = document.querySelectorAll(".viewport");