iOS 11: Status bar no longer floating above content

[leonderijke]

On iOS 11 the status bar no longer floats above the content, but instead pushes the content down. It looks like black-translucent is no longer a valid value for the apple-mobile-web-app-status-bar-style meta tag.

This is reported elsewhere as well:

• https://forums.developer.apple.com/thread/89471
• https://forums.developer.apple.com/thread/91048
• https://stackoverflow.com/questions/47063643/issue-with-ios-11-full-screen-web-app-on-ipad-and-the-status-bar

It's been said that switching to landscape and back would dissappear the issue, but I haven't been able to reproduce that behavior.

If there is a way to detect iOS 11, we could disable the $header-ios-offset in Header.scss for iOS 11. That will at least render the Header with the right height, but unfortunately won't make the status bar transparent.

cc: @RoelN, @ruisalgado

[leonderijke]

This can be fixed by adding viewport-fit=cover to the viewport meta tag in index.html.

[pascalw]

@leonderijke is adding the viewport-fit tag a proper solution or is there anything better we can do?

[leonderijke]

Yes, if you combine viewport-fit=cover with an update of cordova-ios this issue is fixed.