On my iPhone XR chrome I am trying to display a layout above the fold but address bar and bottom navigation bar of the browser takes up a lot of space which goes away once user starts scrolling and actual visible area is revealed which is in accordance with 100vh or window.innerHeight.

What I want is the height before user scroll, the visible area between address bar and nav bar of mobile but can't find any solution, tried the --vh variable trick, I've tried -webkit-fill-available but nothing helps.

Here is my fiddle: https://jsfiddle.net/Imran_Bughio/a8pe75hj/