I've encountered an issue with my responsive website on the iPhone 11/11 pro where the background is visible at the bottom of the page. After researching, it seems like the CSS height property might be causing the problem. It was suggested to use VH instead of %, but changing the HTML BODY to 100vh pushed all the content down (although the background was no longer visible at the bottom). See below - the red represents the background color, and the brown is the image.
All my content fits within the screen. Interestingly, if I rotate the device to landscape mode and then back, everything looks perfect!
I suspect this issue is related to the 'notch' concept - https://css-tricks.com/the-notch-and-css/
https://i.sstatic.net/TfiMZ.jpg
HTML
<body class="bkground">
<div class="main">
<div class="wrapper">
<div class="content" role="main">
<div class="main-form-container">
<form id="auth-form" method="post" class="centered">
<!-- Content here -->
</form>
</div>
<div class="accept-connect-container">
<form method="post" class="accept-form">
<!-- Content here -->
</form>
</div>
</div>
</div>
</div>
CSS
@media (min-height: 640px) and (max-height:699px) {
html body {
height: 100%;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100%;
}
.content {
width: 350px;
}
}
EDIT
I've made some changes to the CSS that seem to have resolved the issue. However, I'm unsure if this fix will cause problems on other devices, although Chrome's responsive tool indicates otherwise. It's a bit tricky to say for sure.
CSS - Replaced % with VH for the BODY and MAIN tag/class heights
@media (min-height: 640px) and (max-height:699px) {
html body {
height: 100vh;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100vh;
}
.content {
width: 350px;
}
}