Estoy usando el siguiente JS para establecer la altura de un elemento fixed en el móvil, debido a cómo la barra de direcciones URL del navegador (Safari) cambia de tamaño al desplazarse.

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

El elemento fijo es la altura del navegador. A medida que se gira, la altura de la ventana gráfica se establece en el 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); }

Esto funciona con la carga, pero durante el desplazamiento, el 'encabezado' se recorta y solo salta a su posición una vez que se detiene el desplazamiento. ¿Hay alguna manera de modificar mi código para que la altura sea fluida y se ajuste durante el desplazamiento al igual que la barra de URL del navegador de iOS?