Solvedcordova ios WKWebView reports wrong size in Cordova iOS 6.1.0

Bug Report

Problem

After upgrading my iOS app to 6.1.0, there's about a centimetre of the screen at the bottom which the webview doesn't seem to extend to. I have a tab menu bar at the bottom of the app, and it's floating above the bottom of the screen. Nothing I do in the CSS allows me to move the tabs any lower in the screen, as though the webview just stops. However, if I background the app then foreground it again, the tabs are now in the right place and the blank part is no longer there.

When I execute $(window).height() initially after startup, this reports the screen height as 818px. After backgrounding and foregrounding the app, it reports 896px.

What is expected to happen?

The WKWebView should extend the full height of the screen.

What does actually happen?

The WKWebView seems to be missing 78 pixels.

Information

I can replicate in the HelloWorld app, so I think this may be a bug in Cordova iOS.

This is how I investigated. Firstly, in my app I removed all my JS, HTML and CSS, but I left jQuery in. When I open the app, $(window).height() reports 818px. After backgrounding and then foregrounding the app, $(window).height() reports 896px.

So, then I created a standard HelloWorld project:

cordova create hello com.example.hello HelloWorld
cordova platform add ios@6.1.0

The only change I made to the helloworld app was to include jQuery. I then ran this on my iPhone XS Max and inspected the app from within my Mac's Safari. Again, $(window).height() reports 818px until I background and then foreground the app. After this, $(window).height() reports 896px.

Environment, Platform, Device

iOS 6.1.0. As far as I can tell, all iPhones are affected. For example, iPhone 8 Plus initially reports its window height as 716px, but then this changes to 736px after backgrounding and foregrounding the app.

Version information

Cordova CLI: 9.0.0
macOS 10.15.5
Xcode 11.5

Checklist

  • I searched for existing GitHub issues
  • I updated all Cordova tooling to most recent version
  • I included all the necessary information above
23 Answers

✔️Accepted Answer

Add some code in CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m

    // re-create WKWebView, since we need to update configuration
    WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];
    // add begin
    #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
    if (@available(iOS 11.0, *)) {
        [wkWebView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
    }
    #endif
    // add end
    wkWebView.UIDelegate = self.uiDelegate;

Other Answers:

We've already set viewport-fit=cover, but there is still white space at the first launch, after resume from background, the white space disappears. Or turn to landscape and back, the white space disappears, too.

If use viewport-fit=cover and body {height:100%}, the height of html body still can not reach the bottom, but the background-color of body can cover the fullscreen(so it's a body backgroundColor space rather than a white space).

Change height: 100% to height: 100vh fix the problem, but is has other side effects.

Tha's why we need a new preference to control it, viewport-fit=cover is not we need.

height: 100vh is the correct way to fix the problem

Related Issues:

71
cordova ios Unable to distribute with Xcode 10
Huh I did it so When trying to push a project to app store with Xcode 10 i get the following new err...
34
cordova ios Cannot read property 'toLowerCase' of undefined [ERROR] An error occurred while running subprocess cordova.
@brodybits ionic cordova platform add ios@latest worked in a new blank project and in the current pr...
27
cordova ios After upgrading to iOS 14 a black screen is quickly shown before splash screen appears ios
That's it! The solution is finally confirmed! As we can see Bug Report Problem It appears that the p...
16
cordova ios WKWebView reports wrong size in Cordova iOS 6.1.0
Add some code in CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m ...
13
cordova ios Recieved Error: Command failed with exit code 65
@marcelmedina If you're using Cordova-iOS 6.x the minimum supported iOS version is 11.0 ...
126
capacitor FileReader API not firing
You can try this. Description of the problem: In my project I'm trying to read and convert a Blob do...
92
cordova android Build errors about drawable since upgrading to v8.0.0
Hello all ! This error also appears when I do release build after upgrading to cordva-android@8.0.0 ...
70
capacitor iOS xcode Project - No such module found ‘Capacitor’
@vi354258 make sure you are opening the Xcode Workspace (App.xcworkspace instead of App.xcodeproj) ...
63
cordova android Support new Android App Bundle package format
@jfoclpf I got it working on circle ci The steps are: 4 - Upload app.aab to google play. ...
54
cordova plugin firebase Failed to apply plugin [class 'com.google.gms.googleservices.GoogleServicesPlugin'] > For input string: "+", again
Hi @rtm for fix this problem go to /platforms/android/cordova-support-google-services In this direct...
53
awesome cordova plugins Native: tried calling plugins, but the plugin is not installed.
Guys I had this issue during a week and finally found the source I'm submitting a .. ...
46
cordova plugin firebase FirebaseApp is not initalized.
I had this issue I built the generated android project in the platform in android studio then I foun...
40
cordova plugin firebase Changing push notification icon - blank android icon issue in 2018
Please test if this code added to config.xml <platform name=android> tag will add the icon as defaul...
37
awesome cordova plugins Media Plugin (Record) create no File on iOS
Hey guys I found a solution for our problem 😎 It seems that there are two important things we must ...
34
cordova plugin firebase Crashlytics Developer Tools error
I found that if you update this line in the project's build.gradle: to Then it works Not sure if the...
31
awesome cordova plugins Ionic 3 Camera not working in IPhone ios 11
Great it's working now What I did : apply the following commands This is my code import { normalizeU...
30
awesome cordova plugins File.readAsArrayBuffer promise never resolves
Modify your index.html Make sure cordova.js is loaded after polyfill.js May be related to #505 I am ...
25
cordova plugin firebase Android Status Bar Icon - All White
Thanks @BlckShrk !! I finally got it working doing that! I'm using Ionic v2 and cordova-plugin-fireb...
24
code push Possible to Delete CodePush Release?
For those coming to this thread more recently Yes I know this may come off as a very trivial questio...
23
cordova android Back button event on full screen video closes application
add this in MainActivity.java it works. Bug Report Problem As the title suggests attempting to exit ...
23
capacitor bug: EXC_BREAKPOINT in registerPlugins
use @capacitor/ios@next #2532 Bug Report Capacitor Version npx cap doctor output: 💊 Capacitor Docto...
21
cordova plugin googlemaps Custom marker icon link does not work
@Julieng50 I fixed the issue related to the iOS path you can use this line if you want ...
18
cordova plugin googlemaps Build fails com.google.android.gms.common.internal.safeparcel.AbstractSafeParcelable not found
Hi What is happening is not loading latest google play service and support So my fix is that I chang...
17
cordova android Requirements check failed for JDK 8 ('1.8.*')! Detected version: null
Master currently has https://github.com/apache/cordova-android/blob/master/bin/templates/cordova/lib...
17
awesome cordova plugins file reader plugin events are not firing
I was able to fix my issue by getting the original native browser instance and using it This worked ...
16
cordova plugin firebase Notification icon problem
First you need generate your icons here; Next you should add the icons generated files in /plataform...
15
outline client Using custom DNS server instead of OpenDNS
Solve it by It means: Any local user contacting out world to port tcp 53 send to $custom_dns_ip at p...
15
cordova plugin inappbrowser iOS - build fails if using "WKWebViewOnly" preference
yes its being sent since August Bug Report Problem What is expected to happen? cordova build ios Bui...
15
capacitor Better solution for electron <base> url (or just document it)
UPDATE: I now have working static paths to my JS/CSS etc in CRA + Capacitor + Electron Having scoure...
14
cordova plugin inappbrowser not work ios13 InAppbrowser select target _blank
This issue is not intended for support Please go to Cordova slack for more help Did you try to add t...
14
capacitor Issues in release build when minifyEnabled is set to true
Here my proguard-rules.pro configuration which seems to ensure that any plugin is preserved during m...
13
cordova plugin firebase Constructor Builder in class Builder cannot be applied to given types
By looking at NotificationCompat.Builder documentation it appears that constructor taking context an...
13
capacitor Multi-app projects config
@Coly010 Not the best way but a 'fix' to make capacitor work in a monorepo (I'm using Nx): cd to the...
13
cordova plugin googlemaps Error: Cannot find module '../node_modules/xml2js'
i mentioned the solution above in plugins/cordova-plugin-googlemaps/src/before_plugin_rm.js replace ...
12
cordova android java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider
They have updated the AdMob SDK you have to add your appID in the AndroidManifest <application> ...
10
tus js client Crashed to upload large files ( > 500MB): [Terminating app due to uncaught exception 'NSMallocException', reason: 'Failed to grow buffer']
@nikolaytsigvintsev I managed to upload it to Vimeo with large files Hi I'm trying to upload a large...
9
cordova plugin background mode App crashes on android 9.0
It will not crash if I do not show the notification from this plugin Note: Notifications from cordov...
8
awesome cordova plugins Cant Resolve all parameters for SQLiteObject (?)
app.module.ts this worked for me Hello Ionic Developers Im currently working with Ionic 2 using Sqli...
7
capacitor Google tag manager not working on IOS
Ok i've fixed The configuration for the tag manager was done by adding something like the following ...
7
capacitor Use Android X dependencies
according to a message in Capacitor slack Next major should be updated to use Android X (dependencie...
6
awesome cordova plugins @ionic-native/keyboard
Find the same issue Workaround: I'm submitting a .. ...
5
awesome cordova plugins Unable to open SQLite database in Android
@iursevla Yes cordova-sqlite-storage is working with pre-populated databases The openDatabase method...
4
awesome cordova plugins Clipboard copy/paste not working
Remove the Clipboard plugin you already have From @thanhdn9120 on July 2 2017 14:55 Hi everybody I'm...
4
cordova plugin googlemaps ios app crash when using addMarkerCluster
You need to set url like this: www/assets/icons/cluster_icons/blue.png I'm submitting a .. ...
3831
axios Axios catch error returns javascript error not server response
I have exactly the same environment Try this: Modify from console.log(error) to console.log(error.re...
731
scrapy ' error: command 'x86_64-linux-gnu-gcc' failed with exit status 1 '
@euler16 for scrapy with Python 3 you'll need with Python 2 you'll need I wanted to install scrapy i...
684
laradock Mysql. The server requested authentication method unknown to the client [caching_sha2_password]
alter user 'username'@'localhost' identified with mysql_native_password by 'password'; would fix it....