I'm using the following JS to set the height of a fixed element on mobile, due to how the browser (Safari) URL bar resizes on scroll.

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

The fixed element is the height of the browser. As it is rotated the height of the viewport is set on the width.

.page-head {
    border-bottom: var(--border);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    position: fixed;
    bottom: -48px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
    width: var(--app-height);
}

This works on load but during scrolling the 'header' is cropped and only jumps into position once scrolling stops. Is there a way I can amend my code so the height is my fluid and adjusts during scroll just like the iOS browser URL bar?