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`.
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.
<rdar://problem/126942075>