En mi iPhone XR Chrome, estoy tratando de mostrar un diseño en la parte superior de la página, pero la barra de direcciones y la barra de navegación inferior del navegador ocupan mucho espacio, lo que desaparece una vez que el usuario comienza a desplazarse y se revela el área visible real que está de acuerdo con 100vh o ventana.alturainterna.

Lo que quiero es la altura antes del desplazamiento del usuario, el área visible entre la barra de direcciones y la barra de navegación del dispositivo móvil, pero no puedo encontrar ninguna solución, probé el truco variable --vh , probé -webkit-fill-available pero nada ayuda .

Aquí está mi violín: https://jsfiddle.net/Imran_Bughio/a8pe75hj/