Bug 236445 - safe-area-inset values not working for websites added to home screen
Summary: safe-area-inset values not working for websites added to home screen
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-02-10 08:27 PST by Martin
Modified: 2023-03-31 08:02 PDT (History)
7 users (show)

See Also:


Attachments
Screenshot of the issue in portrait (88.78 KB, image/png)
2022-02-10 08:36 PST, Martin
no flags Details
Screenshot of the issue in landscape (85.44 KB, image/png)
2022-02-10 08:37 PST, Martin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Martin 2022-02-10 08:27:27 PST
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.
Comment 1 Martin 2022-02-10 08:36:29 PST
Created attachment 451541 [details]
Screenshot of the issue in portrait
Comment 2 Martin 2022-02-10 08:37:25 PST
Created attachment 451542 [details]
Screenshot of the issue in landscape
Comment 3 Radar WebKit Bug Importer 2022-02-10 09:06:47 PST
<rdar://problem/88758381>
Comment 4 ik 2023-03-30 07:25:05 PDT
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?
Comment 5 Martin 2023-03-31 08:02:38 PDT
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?