[Webkit-unassigned] [Bug 237961] New: Standalone with viewport-fit cover causes overscroll issues, breaks position fixed and -webkit-fill-available

[bugzilla-daemon at webkit.org]

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

            Bug ID: 237961
           Summary: Standalone with viewport-fit cover causes overscroll
                    issues, breaks position fixed and
                    -webkit-fill-available
           Product: WebKit
           Version: Safari 15
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ik at rejh.nl
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 454839

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

Testcase

Web apps in standalone mode with `viewport-fit=cover` suffer from overscroll issues and broken css/layout.

The only way to get the correct overscroll behavior (where the body never overscrolls and does not block scrolling on the scrolling element) is to set `html { position: fixed; top/left/right/bottom: 0; }`. However, that causes a gap at the bottom of the page (exactly the size of the extra height we get because we have viewport-fit=cover) even though we have top and bottom set to zero. The top of the element is behind the statusbar (expected) but bottom is not at the bottom.

Replacing `bottom: 0;` with `height: 100vh;`, `height: 100%;` or `height: -webkit-fill-available;` don't work, either. They all result in a gap at the bottom of the window.

Actually, `height: -webkit-fill-available;` never accounts for the extra space when `viewport-fit=cover`. It's always broken in standalone with `viewport-fit=cover`. I have to detect iOS standalone mode and switch back to `100vh`.

Afaik, there is no combination that does not cause scrolling divs to lock up on overscroll *and* have the html/body fill the available height at the same time.

Please see the attached testcase to reproduce the overscroll issue (instructions are included). You can also visit this link:
https://testcase.rejh.nl/webkit-overscroll-fx-element/

You can also use this testcase to reproduce the `position: fixed` and `height: -webkit-fill-available;` issues by toggling/editing some css rules in the inspector:

* html: add `position: fixed;` - fixes overscroll but causes gap
* html: add `position: fixed; top: 0; bottom: 0;` - still shows a gap
* html: add `position: fixed; height: 100vh;` - still shows a gap
* html.is-ios-standalone: turn off `100vh` (enabled `-webkit-fill-available`) - causes gap

As far as I was able to test/verify, The same page without `viewport-fit=cover` does not suffer from any of these issues.

Pretty sure this ticket is related:

window.innerHeight is broken in WKWebView with viewport-fit=cover
https://bugs.webkit.org/show_bug.cgi?id=210009

-- 
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/20220316/086fd3ed/attachment-0001.htm>