WebApp on iPhone with black-translucent StatusBar: Viewport height seems to be wrong

Question

I currently have the problem that my iPhone doesn't show the content down to the bottom of the screen in web apps when I use the status bar style black-translucent.

There's always a gap at the bottom.

I created a minimal example using a simple footer-bar to demonstrate it:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

  <style>
    body {
      background-color: DarkGray;
    }
    
    #footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 54px;
      background-color: DimGray;
    }
  </style>

  <title>Test</title>
</head>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

The problem only exits only on the iPhone in portrait orientation and only when saving the app to homescreen, so it runs fullscreen. Desktop browsers also render the page correctly.

Here's a screenshot how it looks on the iPhone (normally the darker gray bar should be directly at the bottom):

Any idea what's exactly happening here and how to solve it?

score 0 · Answer 1 · answered Jan 20 '20 at 21:51

0

Ok, seems like this happens only when the content of the page isn't filling the whole space vertically until to the footer.

Some CSS to enlarge the content will fix this:

#content {
    min-height: 100vh;
    padding-bottom: 54px;
}

answered Jan 20 '20 at 21:51

Thyraz

2,412
2
21
23

score 0 · Answer 2 · edited May 07 '20 at 08:22

After a few days of laceration with this problem I've found some of the possible reasons:
In my case was a problem just on ios 13.4.1.
My PWA was on a different site from the login and the redirect caused this problem.
example.loginsite.com / example.myapp.com
The border at the bottom was a bar with a "done" button:

To fix this problem just add the manifest to your PWA.

Other reasons could be linked to the "safe area" that apple created for displays without borders like iPhone x, iPhone xs, and so on.
To fix this problem need to use variables (-safe-area-init-*) where * is top, right, bottom, left.

Hope this answer will be helpful to who is fighting with this strange behavior.

WebApp on iPhone with black-translucent StatusBar: Viewport height seems to be wrong

2 Answers2