I build a PWA for iOS Safari. Unfortunately I am facing quite an inconsistent behavior on viewport sizing.

I use the following options and styles

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

* {
    box-sizing: border-box;
}

html {
    height: 100vh;
    height: 100dvh;
    background-color: var(--bg-main);
}

body {
    margin: 0;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

Unfortunately, testing on a iPhone 12 Pro (screen size 390 x 844) the 100dvh viewport height is very inconsistent.

So on initial load, html and body is always 797px which equals 100svh. However, when I scrolled the page or anything the html and body expands to 844px which equals 100lvh. I personally would expect 100svh, 100dvh and 100lvh to be all 844px using viewport-fit cover while being inside the PWA and have the normal behavior outside the PWA with address bar displayed or hidden.

How can I make my screen full height using viewport-fit=cover and working both inside and outside the PWA?