[GitHub] [cordova-plugin-wkwebview-engine] louisameline commented on issue #108: Content dimensions incorrect at startup on iPhone X

[GitBox <gi...@apache.org>]

louisameline commented on issue #108: Content dimensions incorrect at startup on iPhone X
URL: https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108#issuecomment-607461878
 
 
   > We maintainers do not have the resources to actively support closed issues
   
   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**.
   
   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 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?
   
   Also, as others, I think that the 100vh 100% stuff is insufficient. No one should be forced to code like this. A bug fix is better than a poor hackish workaround. And it didn't even work for me, although I didn't insist too much to be honest.
   
   Until this bug is acknowledged and fixed, let me share a temporary workaround I found:
   ```javascript
   const style = document.querySelector('#someContentElement').style
   style.minHeight = '1000px'
   
   setTimeout(() => {
   	document.body.style.display = 'contents'
   	style.minHeight = ''
   }, 0)
   ```
   The idea is simple: make the content overflow the window, switch the body display to `contents` and then remove the content overflow. This will make `window.innerHeight` return the correct value.
   
   Caveat due to `display: contents;`: 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). 
   
   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:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org