Issue with iOS 11 full screen web app on iPad and the status bar

8
votes

I have a full screen home screen web app that is designed for 1024x768 resolution so it fits perfectly on the iPad in landscape mode. Or at least, it did, until the iOS 11. This update now has content rendered under the status bar which pushed the entire page down 20 pixels. My meta-tags involved are as follows:

<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="initial-scale=1,user-scalable=no,viewport-fit=cover">

I was under the impression that the "viewport-fit=cover" would fix this returning to the iOS 10 behavior where the status bar was transparent and "floated" above the HTML instead of pushing it down.

Does anyone know if this is a bug or if I am doing something incorrectly so I can once again get this to display full screen and fit perfectly?

Edit: This appears to be a bug with iOS 11, among other issues with fullscreen web apps. https://forums.developer.apple.com/message/268185

1
htmlipadviewportios11
Could you find a solution to this issue yet? – sandrooco
Nope. I did submit a bug report to Apple. Maybe if more developers do the same, this issue will move up their priority list. – D Loi
It seems a known bug in iOS 11. Read this as well. Removing black-translucent value set on apple-mobile-web-app-status-bar-style meta tag via JS might help (haven't tried yet, no physical iPad with iOS 11 on hand) – Raptor
I had the same bug, but my PWA works fine now after upgrading to iOS 12.1. I didn't change any PWA settings. – user2875289

1 Answers

0
votes

On iOS 11 all styles break in landscape mode after you change the orientation,
and you have choose which one you want to live with.

On orientation changes they add either a bar on top or at the bottom:

Freshly loaded (default, black and black-translucent): loaded

top spacing in black or default white: top

bottom spacing in black-translucent, being the pink background color: bottom

iPhone SE, iOS 11, Full Album, Code