siewcode / test-web Goto Github PK

Problem

• Safari does not obey 100vh and make the app appear as if there is no 100vh
• Consquently the footer is pushed offscreen

Solution

• Use height: -webkit-fill-available; seems to fix it
• But for more reliable solution use js to get innerHeight
• Setting fixed height for header and footer probably won't fix it as the problem is with Safari computing 100vh

JS solution

const resizeHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', resizeHeight)
resizeHeight()

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

Can't to deploy to /test-web/pwa instead /