louisameline edited a comment on issue #108: Content dimensions incorrect at startup on iPhone X URL: https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108#issuecomment-607461878 > I will say again that this is not a Cordova bug. If you are seeing problems then it's related to your HTML content and the meta tags and stylings in your content. Please reopen the issue. Or please explain how on Earth I can have in the console: - at page load, `window.innerHeight` returns 734 - after a rotation to landscape and back to portrait, `window.innerHeight` returns 812 734 = 812 (actual screen height) - 44 (top safe area inset) - 34 (bottom safe area inset). So, I'm not Einstein but I'd say that **at page load and until rotated, the window.innerHeight wrongfully subtracts the safe area insets**. This can be demonstrated even in a blank page. I will also add that the issue happens ONLY if the content of page is smaller in height than the window height. Exemple: if the "natural height" of my page is 500, `window.innerHeight` returns 734 as I said. If my page content is 750px high, `window.innerHeight` will return 750, and if my page content overflows the window, `window.innerHeight` will return 812. Also, **the Ionic-maintained WKWebView plugin fork doesn't have this bug, my guess is that they must have seen it and fixed it**. Maybe their fix can be cherry picked? As for other platform, the bug doesn't happen in Chrome, Safari, UIWebView, Ionic WKWebView, Capacitor. The bug was indeed prevented in many cases when I inserted this at the very beginning of the body: ```html <div style="height: 100vh; position: absolute; visibility: hidden; width: 1px;"></div> ``` This will not work whenever the body has `position: fixed` though (sometimes libraries do that for whatever reason). There are still other minor side effects, which I haven't debugged yet. For the record, I had previously found another quirky workaround: ```css body { display: contents; } ``` ```javascript // I personally put this in the "mounted" (rendered) hook of my Vue app const style = document.querySelector('#someContentElement').style style.minHeight = '1000px' setTimeout(() => { style.minHeight = '' }, 100) ``` This made the body overflow the window for just a moment, so `innerHeight`gets the expected value. `display: contents` makes sure that the `innerHeight` doesn't get back to the wrong value after you remove the overflow. I don't know why exactly, but it works. Caveat due to `display: contents;` though: the padding and margin of the body, if any, will not be enforced anymore, you'll have to set it on children elements instead. Also, a background set on the body will not work anymore, but you can set it on the html tag instead. Finally, your page will lose accessibility (for visually impaired people and such). And there were other quirks with scrolling, positioning, the keyboard... I'm using iPhone XS, iOS 13.4, Xcode 11.4, cordova-ios 5.1.1, cordova-plugin-wkwebview-engine 1.2.1, `viewport-fit=cover`.
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
