Bug 237961 – Standalone with viewport-fit cover causes overscroll issues, breaks position fixed and -webkit-fill-available

• Component: Layout and Rendering
• Status: NEW

Created attachment 454839 [details]
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

[Radar WebKit Bug Importer]

<rdar://problem/90374563>

Any news on this?

As far as i can tell, the overflow issue was fixed in a recent iOS release (16.3?), at least for iPadOS.

I haven't tested the `position: fixed` and `height: -webkit-fill-available;` issues yet.