Monaca Onsen UI Discord Chat Github Repo

Blank bottom space on iPhone XS after Cordova 10 update



  • 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?

    0_1605895117357_IMG_0727.PNG

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

    0_1605895128622_IMG_0725.PNG

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

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

    Thank you
    Takis



  • 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.



  • 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>
    

  • administrators

    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



  • 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>