Top of screen turns black momentarily when keyboard appears (iOS)

ionic-v1
1

Has anyone else noticed the issue of a black box appearing at the top of the screen when you tap into a text box on iOS? This is running on a live iPhone 6. It seems to be related to how far down the page a text box is.

The first one on the form doesn’t cause any jump. But as I progress down the list, the gap at the top of the screen increases.

It’s a jumpy or jerky motion. It appears as the keyboard is rising and then goes away once it’s up.

Is there a work around to this that I can take advantage of? Sorry if I’m not able to describe it in greater detail.

I’m using the latest ionic and XCode 6.2, iOS 8.2 and iPhone 6.

2

yes, I experience it as well!

3

No solutions yet ? This problem is also visible on android with a twist. The black spot is under the keyboard

4

Any news on this issue? I am experiencing the same black flash.

5

I just noticed this. I guess I had this question a few months ago.

The way to fix it is not really a fix I guess. It’s more of a decision you must make about how to scroll when someone taps into a text field.

If you copy my onready method below, you should notice it go away. I can’t remember which one does it. So try a few things and see what works.

 .run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.disableScroll(true)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    
  });
})