Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

White space at page bottom after device rotation in iOS Safari

Tags:

html

css

ios

safari

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:

  • rotate my device to the landscape mode
  • then rotate it back to the portrait mode

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.

enter image description here

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.

like image 780
kazinov Avatar asked Jul 03 '20 14:07

kazinov


2 Answers

@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:

enter image description here

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

like image 89
kazinov Avatar answered Sep 28 '22 19:09

kazinov


After spending most of the day dealing with this "feature" (again), I created a CSS-only solution for iOS 14.4 on iPad, iPhone, and works normally on all regular browsers. No hacks required. The secret is to use 100vh on the HTML and BODY elements, while using position:fixed on your outermost wrapper element with all of the edges clamped to zero.

Notes: there is a visual artifact when rotating the screen if your BODY background is any different than your wrapper background. This same issue also lets you color the address bar at the top by purposefully giving BODY a different background color (optional).

HTML, BODY {
    height: 100%;
    width: 100%;
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    /* required to prevent rogue scrollbars */
    overflow: hidden;
    /* cosmetic stuff: */
    background-color:#5AE;
}
#wrapper {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
  /* if you want the content to scroll normally: */
  overflow: auto;
    /* cosmetic stuff: */
    background-color:#AEA;
    border: #6B6 1em solid;
    box-sizing:border-box;
}
<html>
<head>
    <meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
    <div id="wrapper">
        Content goes here.
    </div>
</body>
</html>
like image 22
leiavoia Avatar answered Sep 28 '22 20:09

leiavoia