[Webkit-unassigned] [Bug 272779] New: safe-area-inset-left and safe-area-inset-right should be 0 viewport-fit is not cover (but contain or auto)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=272779

            Bug ID: 272779
           Summary: safe-area-inset-left and safe-area-inset-right should
                    be 0 viewport-fit is not cover (but contain or auto)
           Product: WebKit
           Version: Other
          Hardware: Unspecified
                OS: iOS 17
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bramus at google.com

Created attachment 470944

  --> https://bugs.webkit.org/attachment.cgi?id=470944&action=review

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`.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240416/6fba32d6/attachment.htm>