Loading the website for the first time in Safari loads just fine with no layout shifts. But if you put Safari in the background and reopen it, when it reloads the page, either manually or automatically the content is shifted up. Rotating the phone to landscape and back to portrait fixes the layout issue.
Images:
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:
<body>
<main>
<h1>Website Name</h1>
<img src="/logo.png">
<div id="txt">
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.
</div>
<div id="btns">
<div>Button 1</div>
<div>Button 3</div>
<div>Button 2</div>
<div>Button 4</div>
</div>
</main>
</body>