Bug 236445

Summary:

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

Product:

WebKit

Reporter:

Martin <martiminchev>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bdakin, ik, luming_yin, martiminchev, thorton, webkit-bug-importer, wenson_hsieh

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

iPhone / iPad

OS:

iOS 15

Attachments:

Description	Flags
Screenshot of the issue in portrait	none
Screenshot of the issue in landscape	none

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?