Bug 244264 - Wrong viewport-relative units behaviour with WKWebView in Web App
Summary: Wrong viewport-relative units behaviour with WKWebView in Web App
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: iPhone / iPad All
: P2 Major
Assignee: Nobody
URL: https://romanczerki.es/svb/
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-08-23 13:19 PDT by Roman Czerkies
Modified: 2023-08-17 00:24 PDT (History)
7 users (show)

See Also:


Attachments
HTML and style to reproduce the issue. (630 bytes, text/html)
2022-08-23 13:19 PDT, Roman Czerkies
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Czerkies 2022-08-23 13:19:23 PDT
Created attachment 461830 [details]
HTML and style to reproduce the issue.

If you open an external link in Home Screen web app and close that one, the web app viewport change.
This cause wrong calculation on block-size viewport-relative units.

* A « jump » appear in the web app during the WKWebView page load.
* After WKWebView closed, the block-size layout has changed.

The layout seems to keep the WKWebView header or navigation block size.

Example with the red part with « block-size: 99svb » (add to Home Screen to see the issue) : https://romanczerki.es/svb/
Comment 1 Radar WebKit Bug Importer 2022-08-30 13:20:19 PDT
<rdar://problem/99348156>
Comment 2 Roman Czerkies 2023-08-16 06:48:30 PDT
With the help of Sime Vidas, we added some bug cases with more details.
Both have to be added as an Home Screen Web App to reproduce the following steps.

First one is without `viewport-fit=cover`: https://romanczerki.es/webapp_viewport-icb/
	- At the opening all is fine until you open the WKWebView link inside the Web App scope : the absolute `lvh` goes outside of the ICB and the fixed `lvh` goes outside of the viewport, then when you come back to the precedent page: all viewport-units back in place. 
	- Open the Webkit link outside of the Web App domain, same behavior as previous link, but when you come back to the home of the Web App, all `lvh` and `dvh` are outside of the ICB and the viewport no longer cover all the phone screen.
	- Scroll to the bottom and  only `dvh` is correctly up to date.
	- If you change the phone orientation, it will reset all viewport-units in the right place.

For the second one with `viewport-fit=cover`: https://romanczerki.es/webapp_viewport-icb_cover/
        - You will notice that all `lvh` going outside of the ICB and other one outside of viewport. You can reproduce all the precedent steps: same bugs but with more distance between ICB and viewport. Viewport and absolute `100%` work well.
Comment 3 Karl Dubost 2023-08-17 00:24:50 PDT
For context this is on iPhone and iPad. 
I tried to test on Desktop and it seems fine (even when added as app).