Summary: | Wrong viewport-relative units behaviour with WKWebView in Web App | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Roman Czerkies <dev> | ||||
Component: | CSS | Assignee: | 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
Roman Czerkies
2022-08-23 13:19:23 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. For context this is on iPhone and iPad. I tried to test on Desktop and it seems fine (even when added as app). |