Bug 316008 – Incorrect 100vh and -lvh in standalone web apps that have not set apple-mobile-web-app-status-bar-style

• Status: NEW
• Component: Layout and Rendering

[Roderick Gadellaa]

Created attachment 479943 [details]
Testcase(s) for this bug

The `100vh` and `-lvh` values are incorrect when a web app is installed without the `[meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /]` tag in place.

AFAIK, there is no workaround or anything we can fix on our side, as web apps need this to be set 'on install'. The behavior does not change when the meta tag is added later on. In other words, once a user installs the web app, it remains broken unless the user completely reinstalls the web app.

## Steps to reproduce:

1. ios-100lvh-pwa-1 - without meta tag
1.1. Go to https://testcase.rejh.nl/webkit-ios-100lvh-pwa/ios-100lvh-pwa-1.html and install the web app.
1.2. Open the web app, inspect the DOM tree and notice how the body element is NOT drawn behind the status bar.
1.3. Take note of the ClientRect.height value that's printed in the document.
1.4. Optional: Try to scroll. The body is set to 100lvh, and should not be scrollable since there is no 'collapsing UI' in a standalone web app.

2. ios-100lvh-pwa-2 - with meta tag
2.1. Go to https://testcase.rejh.nl/webkit-ios-100lvh-pwa/ios-100lvh-pwa-2.html and install the web app.
2.2. Open the web app, inspect the DOM tree and notice how the body element is drawn behind the status bar.
2.3. Take note of the ClientRect.height value that's printed in the document.
2.4. Optional: Try to scroll. The body is set to 100lvh, and should not be scrollable since there is no 'collapsing UI' in a standalone web app.

## Expected behavior:

* The value of ClientRect.height values should NOT be the same between step 1.3 and 2.3
* Both documents should NOT be scrollable (except for the overscroll effect)

## Actual behavior:

* The value of ClientRect.height values is the same between step 1.3 and 2.3
* ios-100lvh-pwa-1 is scrollable

## Notes

I've also included the testcases (linked above) as an attachment to this issue.

I think this issue was introduced in iOS Safari 26, but I haven't checked earlier versions.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/179009964>