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