Bug 236445 – safe-area-inset values not working for websites added to home screen

• Status: NEW
• Component: CSS

[Martin]

1. Open in Safari on iPhone with a notch and gesture navigation: https://ios-pwa-safe-insets.glitch.me
2. Rotate to landscape, observe how the text is right above the navigation line.
3. Add to home screen. Open the home screen shortcut.
4. Observe how the text is behind the line both in portrait and landscape.

[Martin]

Created attachment 451541 [details]
Screenshot of the issue in portrait

[Martin]

Created attachment 451542 [details]
Screenshot of the issue in landscape

[Radar WebKit Bug Importer]

<rdar://problem/88758381>

Is it possible you forgot to add "viewport-fit=cover" in the <meta name="viewport" /> value?

That said, the document should not be drawn behind the gesture pill without this flag, so looks like that's the actual bug?

[Martin]

Adding "viewport-fit=cover" fixes the problem for added-to-homescreen websites.

However, for regular Safari it's not needed. In landscape orientation, the inset is available without it. Is this inconsistency intended behavior?

[Boolat]

Created attachment 472193 [details]
viewport-fit=contain and display: standalone in web app mode

[Boolat]

Created attachment 472194 [details]
viewport-fit=contain and display: standalone in browser

[Boolat]

Have the same issue. I want to keep all the content inside the safe area but navigation line is not considered as "unsafe" and shows on top of the content when viewport-fit=contain is set. And env(safe-area-inset-bottom) is zero!

But when I open that exact page inside the browser, not as a web app, then navigation line is still covers the content, but env(safe-area-inset-bottom) is set to compensate that. And what is weird, the env(safe-area-inset-right) and env(safe-area-inset-left) are also set to compensate the side unsafe areas while those areas are already cut by viewport-fit=contain.

Here I added some screenshots to show the problem
https://bug-236445-attachments.webkit.org/attachment.cgi?id=472193
https://bug-236445-attachments.webkit.org/attachment.cgi?id=472194

And here is the place where you can test it: https://b-kamalov-diginavis.github.io/manifest/contain-standalone/

[Boolat]

Created attachment 472221 [details]
viewport-fit=cover and display: standalone in web app mode

Another detail! When I set <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">, the cover viewport-fit value starts to work weirdly:

position: absolute; bottom: 0; is no longer positioned at the bottom of the screen. It now have the bottom padding equal to env(safe-area-inset-top) and also the env(safe-area-inset-bottom) is presented to compensate the bottom line that is now even lower than bottom: 0. Obviously this is the wrong behaviour