Bug 244264

Summary: Wrong viewport-relative units behaviour with WKWebView in Web App
Product: WebKit Reporter: Roman Czerkies <dev>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: dev, hi, karlcow, sime.vidas, simon.fraser, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: iPhone / iPad   
OS: All   
URL: https://romanczerki.es/svb/
Attachments:
Description Flags
HTML and style to reproduce the issue. none

Roman Czerkies
Reported 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/
Attachments
HTML and style to reproduce the issue. (630 bytes, text/html)
2022-08-23 13:19 PDT, Roman Czerkies 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-08-30 13:20:19 PDT
<rdar://problem/99348156>
Roman Czerkies
Comment 2 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.
Karl Dubost
Comment 3 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).
Note You need to log in before you can comment on or make changes to this bug.