ionic-framework: bug: Keyboard issue (iOS 8/9)

Type: <span ionic-type>bug</span>

Ionic Version: <span ionic-version>1.x</span>

Platform: <span ionic-platform>ios</span> <span ionic-platform-version>9</span> <span ionic-webview>webview</span>

<span ionic-description>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: https://github.com/driftyco/ionic/issues/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.</span>

<span is-issue-template></span>

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 18 (4 by maintainers)

Most upvoted comments

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>