Bug 272779 – safe-area-inset-left and safe-area-inset-right should be 0 viewport-fit is not cover (but contain or auto)

• Status: NEW
• Component: CSS

[Bramus]

Created attachment 470944 [details]
Screenshot of demo page in MobileSafari on an iPhone 15 in Landscape mode

See attached screenshot of https://interop-2022-viewport.netlify.app/individual/safe-inset-areas/viewport-fit-auto in MobileSafari on an iPhone 15 in Landscape mode.

- The viewport meta tag on this page is set to `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=auto" />`
- The red dashed box is the ICB visualized
- The blue tinted overlay is `position: fixed` and set to `inset: 0`
- The green tinted overlay is `position: fixed` and set to `safe-area-inset-X` on each edge.

The left and right edges of the green overlay should line up with that of the blue overlay.

Cause of this is `safe-area-inset-left` and `safe-area-inset-right` reporting values that are not `0`. In the case of `viewport-fit=contain` and `viewport-fit=auto`, these two values should be `0`. Only when `viewport-fit=cover` is applied, only then should these two insets report values greater than `0`.

[Bramus]

Forgot to mention in #c0 that MobileSafari is set to Single Tab mode here, not Tab Bar mode.

Also, I’m not sure if `safe-area-inset-bottom` getting a value other than 0 is also part of this bug or an actual feature:

- One the one hand, the original PR that added these envvars mentioned that the inset areas only get a value when `viewport-fit=cover` is used.

- On the other hand I do like MobileSafari reporting a value greater than 0 here as there is content being drawn underneath the unsafe area created by the App Switcher Line.

[Radar WebKit Bug Importer]

<rdar://problem/126942075>