Загрузка сайта из фона смещена вверх ⇐ CSS

[Гость]

При первой загрузке веб-сайта в Safari он загружается нормально, без изменений макета. Но если вы переведете Safari в фоновый режим и снова откроете его, то при перезагрузке страницы содержимое вручную или автоматически сместится вверх. Поворот телефона в альбомную и обратно в книжную ориентацию устраняет проблему с макетом.
Изображения:
https://imgur.com/a/4eLkfQX
CSS:
body {
font-family: 'Titillium Web', sans-serif;
height: 100lvh;
margin: 0;
overflow: hidden;
position: absolute;
inset: 0;
margin-top: env(safe-area-inset-top); /* this didn't work */
}
html {
min-height: calc(100% + env(safe-area-inset-top)); /* this didn't work too */
}
main {
background-image: url(/bg.jpg);
background-position: center;
background-size: cover;
display: flex;
color: white;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
transition: top .3s;
z-index: 10;
}
main, #content {
position: absolute;
inset: 0;
height: 100lvh;
}
/* I also tried vh, dvh, and svh */

HTML:


Website Name


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tellus integer feugiat scelerisque varius morbi enim nunc faucibus. Praesent tristique magna sit amet. Ultrices mi tempus imperdiet nulla.

Button 1
Button 3
Button 2
Button 4





Подробнее здесь: https://stackoverflow.com/questions/784 ... shifted-up