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 {
pointer-events: none;
perspective: 300vmax;
perspective-origin: 50% var(--y-offset);
}
.viewport * {
pointer-events: initial;

2
web/viewport.js
View file

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