bug: Keyboard issue (iOS 8/9)

[DawidMyslak]

Type: bug

Ionic Version: 1.x

Platform: ios 9 webview

I'm having issues with input fields on latest Ionic (1.2.4) on my iOS devices. Basically every time when I click on the input field the whole app "jumps".

I think the similar issue was already explained here: #4645

Here is the video showing my problem (iPhone 6 and iOS 8.2, but I've noticed the same behavior on iOS 9.2.1):
https://youtu.be/I21yVtTmuSI

I used the "sidemenu" app in my example, this is the simplest way to reproduce it:

$ ionic start my-test-app sidemenu
$ ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.0
Gulp local:
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Windows 7 SP1
Node Version: v4.2.1

I also modified my-test-app\www\templates\browse.html using following code:

<ion-view view-title="Browse">
  <ion-content>
    <h1>Browse</h1>
    <form>
      <div class="list">
        <ion-input class="item item-input">
          <ion-label>Label</ion-label>
          <input type="text">
        </ion-input>
        <ion-input class="item item-input">
          <ion-label>Label</ion-label>
          <input type="text">
        </ion-input>
        <ion-input class="item item-input">
          <ion-label>Label</ion-label>
          <input type="text">
        </ion-input>
        <ion-input class="item item-input">
          <ion-label>Label</ion-label>
          <input type="text">
        </ion-input>
        <ion-input class="item item-input">
          <ion-label>Label</ion-label>
          <input type="text">
        </ion-input>
    </form>
  </ion-content>
</ion-view>

Then I used Ionic View app to test it:

$ ionic upload

In the example above I used <ion-input> directive, but I also tried regular <label> tag but the behavior was the same.

Is there any way how can I prevent this behavior? I'm designing login screen and few more advanced forms and this issue makes user experience really bad.

[sdhull]

Yeah I get the screen jumping as well. I'm not as concerned with the jumping (though it is kind of unattractive), as I am with the keyboard initially covering lower inputs (as described in my comment in the forums).

> ionic.version
"1.2.4-nightly-1917"

Here's a gif of me trying to debug it, but after viewing the commit that was supposed to fix this, I'm clearly out of my depth. Some help would be greatly appreciated... @mlynch ?

[mlynch]

Hey guys, let's see if we can get to the bottom of this. First, you're sure the keyboard plugin is installed properly?

Second, do you have this line in your app.js: https://github.com/driftyco/ionic-app-base/blob/master/www/js/app.js#L18

This was a fixed issue so want to see what's going on. Also @tlancina can you jump in here?

[sdhull]

? head plugins/ionic-plugin-keyboard/package.json
{
  "name": "ionic-plugin-keyboard",
  "version": "1.0.8",

Also, from safari web inspector:

> cordova.plugins.Keyboard.disableScroll
< function (disable) {
    exec(null, null, "Keyboard", "disableScroll", [disable]);
}

I assume that this indicates the plugin is installed properly but if there's more to it, please let me know.

I did not have that line in my app.js, however, after adding it and running my app in the simulator again, I've found the behavior is very much the same as before. I'll build to my phone tomorrow to see if that's any different...

[DawidMyslak]

I used "sidemenu" example and that line is definetly there:

if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);
}

I will try to debug it to make sure this code is executed.

[DawidMyslak]

Okay, I think I got something. Following code is not executed at all (running in Ionic View):

if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);
}

Just wondering, for "sidemenu" app we're using latest version of keyboard plugin, which is 1.0.8, but Ionic View is using 1.0.3: http://docs.ionic.io/docs/view-usage

I tried to change my fetch.json file and use 1.0.3 there but no success.

[DawidMyslak]

Finally solved it. So basically the problem is that window.cordova is undefined in $ionicPlatform.ready function, at least in Ionic View. Currently I don't have an access to Mac so can't really confirm it in proper hybrid build.

The simplest solution is to modify main index.html file and put following code there (before any JavaScript library is loaded):

<!-- ionic view hack -->
<script>window.cordova = {};</script>

[DawidMyslak]

Closing issue, thanks for your help.

[tlancina]

Just a follow-up, sorry you ran into this annoying gotcha in View. Because scripts can only be injected into an inAppBrowser (which is what View is) after page load, window.cordova is initially undefined, causing Ionic to think it doesn't need to wait for the deviceready event, which makes $ionicPlatform.ready execute immediately and any plugin calls in there fail because they haven't initialized yet.

Glad you got it working!

[mlynch]

That's something we could fix in view, right @tlancina?

[tlancina]

It's been a while since I visited the issue, but I seem to recall struggling to introduce any window properties before page load. Localstorage is unreliable and can be cleared, and any indicators from native require the Cordova bridge to be initialized, which is being skipped in this case.

We could modify user files on upload to include <script> window.cordova = {} </script> in a way similar to how we add cachebusters to asset URLs, but there were issues with doing it for cachebusters and I wasn't sure how robust it would be.

I think it might be easier to add a check for something like a custom View user agent into the framework: https://github.com/driftyco/ionic/blob/master/js/utils/platform.js#L197, but that felt slightly dirty.

Unfortunately nothing straightforward, or it would have been fixed already. That being said, I think this probably bites more people than any solution would, so fixing it in some way is preferable to letting it continue to cause people headache.

[sdhull]

tl;dr: adding <script> window.cordova = {} </script> to my index.html file broke app initialization. Removing and re-adding the keyboard plugin seems to have fixed the problems for me (no more jumping, the keyboard no longer covers low inputs).

---

So something strange happened for me when I added <script> window.cordova = {} </script> to my index file: it broke app initialization (app was stuck on splash screen).

The console.log file shows:

2016-02-18 12:22:29.333 MyApp[72347:4191883] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///Users/stevehull/Library/Developer/CoreSimulator/Devices/FEB3FE01-A5DF-4B97-BFF7-2C1988C9AC21/data/Containers/Data/Application/B0E70EEE-35CA-48B5-8969-CE6FC74F8C56/Library/Cookies/com.me.app.MyApp.binarycookies
2016-02-18 12:22:29.405 MyApp[72347:4191883] Apache Cordova native platform version 3.9.1 is starting.
2016-02-18 12:22:29.406 MyApp[72347:4191883] Multi-tasking -> Device: YES, App: YES
2016-02-18 12:22:29.408 MyApp[72347:4191883] Unlimited access to network resources
2016-02-18 12:22:29.576 MyApp[72347:4191883] [CDVTimer][statusbar] 115.522981ms
2016-02-18 12:22:29.586 MyApp[72347:4191883] [CDVTimer][splashscreen] 9.539008ms
2016-02-18 12:22:29.586 MyApp[72347:4191883] CDVPlugin class IonicKeyboard (pluginName: keyboard) does not exist.
2016-02-18 12:22:29.586 MyApp[72347:4191883] [CDVTimer][keyboard] 0.135005ms
2016-02-18 12:22:29.586 MyApp[72347:4191883] [CDVTimer][TotalPluginStartup] 125.712037ms
2016-02-18 12:22:29.628 MyApp[72347:4191883] Resetting plugins due to page load.
2016-02-18 12:22:30.336 MyApp[72347:4191883] Finished load of: file:///Users/stevehull/Library/Developer/CoreSimulator/Devices/FEB3FE01-A5DF-4B97-BFF7-2C1988C9AC21/data/Containers/Bundle/Application/896F5CBF-07C2-47D1-BAEE-DC7B75570637/My%20App.app/www/index.html#/login

Of course I was struck by CDVPlugin class IonicKeyboard (pluginName: keyboard) does not exist. WTF!! So I did:

ionic plugin remove ionic-plugin-keyboard
ionic plugin add ionic-plugin-keyboard

App is still stuck on splash screen, however that message went away. So I removed <script> window.cordova = {} </script> from my index file and now my keyboard issues are all fixed. I guess I didn't have the keyboard plugin installed properly after all? Maybe it was an old version of it? I have no idea. But removing it and re-adding it seems to have fixed my problem (also adding cordova.plugins.Keyboard.disableScroll(true); to my app.js file, though that alone did not fix it).

Thanks so much to @mlynch and the rest of the ionic team!!

[DawidMyslak]

For me reinstallation of the plugin didn't work. But I'm talking only about Ionic View, not about hybrid build.

[sdhull]

I'm not sure what you mean @DawidMyslak -- IonicView vs hybrid build. I was only testing in iOS (simulator and with testflight). Did you try adding <script> window.cordova = {} </script> to your index.html file above all other script tags?

[DawidMyslak]

@sdhull Have you ever used Ionic View? The app that you can download from App Store? It's more like container for your JavaScript source code with preinstalled set of cordova/ionic plugins. So when you upload an app there your "plugins" folder is not included. When you create proper build for your iOS devices, all your project files are included, so sometimes you can expect different behaviors. I'm using Windows machine for now and the only way how I can test my app is Ionic View. And yes, in my case using the hack above with empty cordova object attached to the window solves the problem.

[sdhull]

@DawidMyslak ohhh no I've never used Ionic View.

One interesting thing to note is that Android didn't have this bug at all (also worth noting I'm using crosswalk), that is to say that upon focusing on text fields, the view didn't jump, and lower text fields were properly scrolled into view. After reinstalling the keyboard plugin, the keyboard on Android is slower. And while it still scrolls lower text fields into view, it does so so slowly that it seems like it's not working.

So now I have to make sure the plugin is not installed for Android, and is installed for ios. 😞

[nwocykra]

I have been dealing with this issue since a year with 3 different apps in varying degrees. This issue is definitely not only for Ionic View.
For me add/remove of the plugin didn't make any difference.

Never got a bullet proof solution until now. <script> window.cordova = {} </script> worked for me.
@DawidMyslak Thanks

This ought to be looked into.

[DawidMyslak]

@nwocykra Glad it helped.

[VinceOPS]

Hi Ionic Team!
I'm having the same issue with an iPhone 6, iOs 9.2 and ionic 1.3.

Looks like the issue is the same than #4645 and ionic-team/ionic-plugin-keyboard#159.

Any help would me most welcome! Thanks!