Comments (23)
maciej-zabielski
commented on May 26, 2024
4
@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.
from cordova-plugin-wkwebview-engine.
devXpro
commented on May 26, 2024
1
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 */
}
from cordova-plugin-wkwebview-engine.
magicPeach
commented on May 26, 2024
1
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!
from cordova-plugin-wkwebview-engine.
breautek
commented on May 26, 2024
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/
from cordova-plugin-wkwebview-engine.
caleb87
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
sjoerdloeve
commented on May 26, 2024
Try to use height: calc(100% + env(safe-area-inset-top, 0) + env(safe-area-inset-bottom, 0));
from cordova-plugin-wkwebview-engine.
caleb87
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
breautek
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
caleb87
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
DmcSDK
commented on May 26, 2024
change height '100%' to '100vh'
like this
html,body { height: 100vh; width: 100%: padding: 0px; margin: 0px; }
from cordova-plugin-wkwebview-engine.
sjoerdloeve
commented on May 26, 2024
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?
from cordova-plugin-wkwebview-engine.
caleb87
commented on May 26, 2024
DmcSDK, the 100vh does work.
Sjoerd, what device did you test it on? iOS version?
from cordova-plugin-wkwebview-engine.
DmcSDK
commented on May 26, 2024
@caleb87
device : iphone XR 64G, 13.6
cordova : cordova-ios 5.1.1 , cordova 9.0
xcode: 11.6
from cordova-plugin-wkwebview-engine.
SerQuicky
commented on May 26, 2024
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?
from cordova-plugin-wkwebview-engine.
davidyuk
commented on May 26, 2024
this seems to be the same issue as #108
from cordova-plugin-wkwebview-engine.
terreng
commented on May 26, 2024
This can be fixed by reapplying #45
from cordova-plugin-wkwebview-engine.
maciej-zabielski
commented on May 26, 2024
@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 :(
from cordova-plugin-wkwebview-engine.
mariogarranz
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
mariogarranz
commented on May 26, 2024
@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!
from cordova-plugin-wkwebview-engine.
regnete
commented on May 26, 2024
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 apache/cordova-ios#965
Working fix: apache/cordova-ios#965 (comment)
from cordova-plugin-wkwebview-engine.
amphora-ken
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
bbb81
commented on May 26, 2024
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).
from cordova-plugin-wkwebview-engine.
jcesarmobile
commented on May 26, 2024
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.
from cordova-plugin-wkwebview-engine.
Related Issues (20)
- Cookie with WKWebView are not persistent HOT 4
- Not able to see the first page of my app. HOT 16
- Confirming cordova-ios version HOT 2
- installing plugin results in MyApplication platform being installed HOT 4
- Problems during migration from UIWEBVIEW to WKWEBVIEW HOT 5
- ios 13.6 and the new wkwebview engine HOT 2
- Ionic Cordova - iOS 12 and 13 pushing footer buttons beyond safe area HOT 1
- Open an html file from unzipped file throwing Received an unexpected URL from the web process|WebPageProxy::Ignoring request to load this main resource because it is outside the sandbox HOT 1
- Freezing application when add this plugin HOT 1
- postMessage() in WKWebView HOT 1
- Ignoring request to load this main resource because it is outside the sandbox HOT 2
- Fail to compile CDVWKWebViewEngine.o to CDVWKWebViewEngine.m normal arm64 objective-c HOT 2
- "Take Photo or Video" causes app to crash HOT 2
- RBSAssertionErrorDomain, file picker HOT 1
- The sandbox is not in sync with the podfile.lock run pod install or update cocoapods installation - ionic v5 ios HOT 1
- Fixed header/nav bar flickering on keyboard pop up due to webview resize HOT 2
- M1 Macbook cant build ios app with WKWebView HOT 3
- v1.2.2 update needs to be synced to npm (currently v1.2.1) HOT 1
- Cannot set base64 image on WKWebview using evaluateJavascript method iOS platform HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-wkwebview-engine.