IOS Safari PWA: непостоянный размер области просмотра ⇐ CSS

[Anonymous]

Я создаю PWA для iOS Safari. К сожалению, я столкнулся с довольно непоследовательным поведением при изменении размера области просмотра.
Я использую следующие параметры и стили

Код: Выделить всё

Код: Выделить всё

* {
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;
}

К сожалению, при тестировании на iPhone 12 Pro (размер экрана 390 x 844) высота области просмотра 100dvh очень нестабильна.
Итак, при начальной загрузке HTML и тело всегда имеют размер 797px, что равно 100svh. Однако когда я прокручиваю страницу или что-то еще, HTML и тело расширяются до 844px, что равно 100lvh. Лично я ожидал бы, что 100svh, 100dvh и 100lvh будут иметь размер 844px с использованием покрытия, подходящего для области просмотра, находясь внутри PWA, и будут вести себя нормально вне PWA. с отображаемой или скрытой адресной строкой.
Как сделать экран во всю высоту с помощью viewport-fit=cover и работать как внутри, так и вне PWA?

Подробнее здесь: https://stackoverflow.com/questions/786 ... wport-size