I have a website with a meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and height:100%;
on html
and body
tags.
When I access this site from Safari (iOS 13.5.1) and do the following:
then a white space appears on the bottom of the screen. This space is not a part of the page html code. It is outside of the html
tag.
Minimum reproducible example: https://jsbin.com/cojabiquza
This seems to be related to the Safari behaviour when it hides the address panel and the bottom panel when the device goes to the landscape mode. And when it goes back to the portrait mode the panels are shown again but the browser "forgets" to recalculate something and shows an extra space on the bottom of the page.
Deleting <meta name="viewport"...
fixes it. But I can't get rid of it because I have a responsive website.
In other browsers it works well.
Please share your experience if you know how to fix it.
@Jax-p answer
is valid for the bug I described but it causes another problem.
When you use 100vh
the content starts to be hidden behind the address bar:
So in my real life app I ended up with a bunch of hacks:
document.addEventListener('orientationchange', () => {
document.documentElement.style.height = `initial`;
setTimeout(() => {
document.documentElement.style.height = `100%`;
setTimeout(() => {
// this line prevents the content
// from hiding behind the address bar
window.scrollTo(0, 1);
}, 500);
}, 500);
});
This hack more or less fixes the problem in iOS Safari 12 and 13