Bug 237961 - Standalone with viewport-fit cover causes overscroll issues, breaks position fixed and -webkit-fill-available
Summary: Standalone with viewport-fit cover causes overscroll issues, breaks position ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-03-16 08:39 PDT by ik
Modified: 2023-07-17 13:53 PDT (History)
6 users (show)

See Also:


Attachments
Testcase (26.07 KB, application/x-zip-compressed)
2022-03-16 08:39 PDT, ik
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description ik 2022-03-16 08:39:18 PDT
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
Comment 1 Radar WebKit Bug Importer 2022-03-16 09:29:48 PDT
<rdar://problem/90374563>
Comment 2 ik 2022-12-14 12:29:25 PST
Any news on this?
Comment 3 ik 2023-03-14 06:14:45 PDT
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.