cordova-plugin-wkwebview-engine
cordova-plugin-wkwebview-engine copied to clipboard
apache
height 100% not correct on iPhone X. goes away after rotating?
Bug Report
The body is set to red, and a div is set to blue. When the app opens on iPhone X, the computed body height and div height are both 732px, height 100% in safari dev tools. The screen is 812 pixels though.
When I rotate the phone to landscape, the entire screen goes blue as it should. When I rotate it back to portrait, it stays blue.
If I use ionic-webview instead, this doesn't happen. If I set the height to screen height in pixels, then it also uses the entire screen.
...html... with viewport=cover
<style>
html,body {
height: 100%; width: 100%: padding: 0px; margin: 0px;
}
</style>
<body style="background: #f30;">
<div style="height: 100%; width: 100%; background: blue;"></div>
</body>
What is expected to happen?
height should obey the 100%
What does actually happen?
height is not going to 100%
Video showing rotation: https://streamable.com/tah4ct
Environment, Platform, Device
iPhone X , iOS 13.6
Version information
Cordova CLI 9, Xcode
Checklist
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
viewport=cover
Do you mean...
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
viewport meta doesn't have a viewport=cover attribute, it isn't a standard attribute, but safari iOS implements viewport-fit=cover under the viewport meta tag, which does what you want.
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
That's what I meant yes. It's set to "cover" though it's clear that it is working since the blue div goes into the statusbar area. I decided to check what it does with it set to contain, and contain is working properly. Of course I need to use cover, so this won't help me.
Try to use height: calc(100% + env(safe-area-inset-top, 0) + env(safe-area-inset-bottom, 0));
Sjoerd, I tried that before just to be sure, but it didn't work. Safe-area-insets don't pad anything by default. My code is literally as basic as the HTML in my first post, so there is no padding or margin. There are no CSS sheets or anything that could be messing it up.
It's further demonstrated by this gif. Any safe-area-inset would apply padding when it returns to portrait.
This plugin is about to become deprecated, since this codebase was essentially imported into cordova-ios core since cordova-ios@6.. Is this reproducible on the latest version of cordova-ios without this plugin? If so, I'll move this over to the cordova-ios repo.
Sorry I don't have mac hardware to test this myself.
Throwing build bugs so I'll have to figure them out first. On another note, it also happens on the xcode simulator for iPhone 11. It doesn't happen on iPhone SE.
change height '100%' to '100vh'
like this
html,body { height: 100vh; width: 100%: padding: 0px; margin: 0px; }
I'm always using 100% height for my Cordova apps, so i'm trying to help you out. I did create a new app on Cordova CLI 9, Cordova iOS 5.1.1:
Then i changed/minimized the index.html file to fit the window:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">
<title>Dynamic height</title>
<style type="text/css" rel="stylesheet">
html, body, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
background: red;
}
body {
background: blue;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
On my device it works great, can you try it?
DmcSDK, the 100vh does work.
Sjoerd, what device did you test it on? iOS version?
@caleb87 device : iphone XR 64G, 13.6 cordova : cordova-ios 5.1.1 , cordova 9.0 xcode: 11.6
Hello guys,
I have the same problem in my Ionic-Apps after the iOS update from 14.2 to 14.3 and only on the iPhone 11 Pro Max (likely also to be on the iPhone Pro Max 12). I am getting a white-bar at the height of the notch bar. This bug only happens on the real device, I can not reproduce it on the emulator.
Complete enviorement:
- device: iPhone Pro Max 11, iOS 14.3
- cordova: cordova-ios 5.1.1 , cordova 8.1.1
- Xcode: 12.3
I tried the solution from @DmcSDK, sadly it did not help. Does someone have the same problem under iOS 14.3?
Try this:
body {
overflow: hidden !important;
height: 100vh;
min-height: 100vh;
box-sizing: border-box;
margin: 0px;
padding: 0px;
width: 100%;
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); /* iOS 11.0 */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); /* iOS 11.2 */
}
@caleb87 did you eventually find a workaround for this? I have tried both
- height: 100vh; min-height: 100vh; (and 100%, with viewport-fit=cover') but it does not change anything... and I still get this bottom padding until rotated :(
I am having the same issue with cordova ios 6.2.0.
Using the suggested CSS workarounds did not fix it either. @devXpro solution moves the whole screen lower, so there is no black bar at the bottom, but then there is a black bar around the notch area.
@mariogarranz - In my case it eventually worked - I had some conflict with global viewport settings (styling), so it's important to make sure that whatever framework you are using (ExtJS, Angular, React, JQuery, whatever else) is not messing around with body/html CSS.
Curently I use a combination of viewport settings:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
with inline styl eon HTML page:
<style type="text/css" rel="stylesheet"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100vh; position: relative; overflow: hidden; } </style>
All of my views have code to determine notch position and height and adjust accordingly.
@maciej-zabielski Actually you're right. I'm not using any framework, but my app is a game that renders a full body sized canvas, so the problem with that fix is I should not take into account the notch padding.
Thanks!
We are facing this issue in the emulators now: iPhone XR, iPhone Pro Max (12 & 13), etc. We are not using the wkwebview plugin but the integrated wkwebview feature form cordova-ios. See https://github.com/apache/cordova-ios/issues/965 Working fix: https://github.com/apache/cordova-ios/issues/965#issuecomment-1017265047
I also faced the height issue on IPad. Bottom content gets hidden, as it won't take device height at initial. But after changing orientation, it looks fine. I used WKWebview to display our content. So I did autoresizingMask for that WKWebView like this.
webView.autoresizingMask = [.flexibleWidth,.flexibleHeight]
And now the issue has been fixed. I am not an iOS developer, just a front-end developer. So I don't know anything in-depth about IOS. Hope this suggestion helps you. Good Luck!
I am still experiencing this problem, and nothing above has been able to fix it. Any other hints or tips? My problem is exactly how the OP states - the bottom portion of the screen in portrait mode is not used until the device is rotated to landscape and back to portrait.
Curently I use a combination of viewport settings:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">with inline styl eon HTML page:
<style type="text/css" rel="stylesheet"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100vh; position: relative; overflow: hidden; } </style>All of my views have code to determine notch position and height and adjust accordingly.
@maciej-zabielski Thank you for pointing that out! Saved me a bunch of time. Fixes the issue on any iPhone (testet in iOS simulators even without notches).
We are archiving this repository following Apache Cordova's Deprecation Policy. We will not continue to work on this repository. Therefore all issues and pull requests are being closed. Thanks for your contribution.
