100vh page loader on mobile Safari issue

Hi, I am having trouble with this adaptive loader that is supposed to appear over the page during page load. the “100vh” sizing does not account for the address bar disappearing. I’ve tried the common fixes by adding this to my styles:

.loader {
height: 100vh;
/* Fallback for browsers that do not support Custom Properties /
height: calc(var(–vh, 1vh) 100);

along with this script:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty(‘–vh’, ${vh}px);

but this isn’t seeming to work for me. Am I overlooking some obvious issue? or is this solution not relevant for fixed elements


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

https://preview.webflow.com/preview/phoenixcommerce?utm_medium=preview_link&utm_source=dashboard&utm_content=phoenixcommerce&preview=3c379c22c75a1399b4b82b1d5fd5bc97&workflow=preview

Change the height to 100svh