Search code examples
htmlmobile-safarimeta-tags

Safari 11.3.1 status bar turned white on white

I just updated my iOS on iPhone 7 to 11.3.1. When I add my webapp to front page (standalone mode), the status bar (on the top with connection info) now appears as a solid white bar (white on white).

I've tried:

  1. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  2. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  3. <meta name="apple-mobile-web-app-status-bar-style" content="default">
  4. <meta name="apple-mobile-web-app-status-bar-style" content="white">
  5. Removing meta tag completely.

All to no avail. I don't really care what color it is, but the white bar looks dumb. Can anybody help?

Solution

  • Figured it out. You need to add viewport-fit=cover to your viewport meta tag content.

    Apparently, as of recently, the status bar will not overlap the content by default. This setting will override that. So your viewport meta tag might look something like this:

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, user-scalable=no">