Blank bottom space on iPhone XS after Cordova 10 update

[Takis]

Hello all,

1. after Cordova 10 update, have screen view issues on iPhone XS, o Blank bar appears on bottom of page

How can fix this?

2. on the MonacaLocalKit got the following message
   How can update my Apps on the new Cordova version?

extra Enabled Plugins:
Cordova-plugin-email-composer
InAppBrowser

also the SplashScreenDelay not working
<preference name=“SplashScreenDelay” value=“7000”/>

Thank you
Takis

[ogunm]

First Problem

if you are using jquery its fix simple.

ons.ready(function() {

   $('body').height(window.screen.availHeight);

 });

or pure javascript

document.body.style.height= window.screen.availHeight;

Second Question

Monaca localkit debugger using cordova version 10 now, if you are use this tools and you want view correctly please update your apps.

Maybe you dont want update your apps, okay you can build from Monaca Cloud IDE Build iOS App > Buil for Debugging > Custom Build Debugger and continue development.

Third Question

I haven’t tested this, but the splash screen doesn’t work correctly.
My own application, Default@2x~universal~anyany.png uses a single file, but when opening the application, first the “monaca” logo appears for half a second, and then my screen png appears. This problem should be fixed.

[Takis]

Dear Ogunm
Thank you very much for replay.

I tried to enter the code you suggested, but the problem is not solved.
I get the following error:
TypeError: is not a function. (In ‘$ (’ body ‘)’, ‘$’ is undefined)

same problem on the pure javascript (document.body.style.height= window.screen.availHeight;)

I use JavaScript Monaca Templates (Onsen UI V2 JS Navigation & Splitter)

P.S. i dont use jquery…
if i have to use jquery to resolve the issue, which version should i?

Thank you again

…My Script…

  <script>
    ons.ready(function() {
$('body').height(window.screen.availHeight);
      console.log("Onsen UI is ready!");
    });

    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>

[emccorson]

If you rotate the screen to landscape and then back to portrait, does the screen display correctly once back in portrait?

Also, were you using WKWebView before the Cordova 10 upgrade? It is used by default in Cordova 10, but before that you had to use a plugin if you wanted to use WKWebView.

This may be related, I’m not sure: https://github.com/apache/cordova-plugin-wkwebview-engine/issues/53

mwargan created this issue in apache/cordova-plugin-wkwebview-engine

closed iPhone X initial height issue #53

[Takis]

Dear emccorson Thanks for your answer.

The screen issue on iPhone X in WKWebView already existed in Cordova 9, but it has not been fixed and it also exists in Cordova 10.

The problem temporary fixed if the app is down to the taskbar and reopened.
But if the app is completely closed by the taskbar and reopened, the issue returns.

After much searching I have found if it is added to the style -the following code- then the issue is fixed… but this is something temporary…

<style>
html, body {
  width: 100vw;
  height: 100vh;
}
</style>