Ionic-framework: bug: Bouncing content when entering form field

[adrienkohlbecker]

Type: bug

Platform: mobile webview

When the user enters a form field, exits a form field or changes to a field of a different type (basically, when the keyboard appears, hides or changes), there is a noticeable glitch.
The whole app content bounces down slightly
I'm using the ionic keyboard plugin & ionic rc 1
It's not happening on the same page using Chrome on Android.

Here is a GIF of what's happening (taken on Android 5 but it also happens on iOS). In the gif I'm tapping on form fields and outside of them.
http://imgur.com/Qr82fVn

[adrienkohlbecker]

Note, I can provide a link to the staging app via PM if it helps debugging

[adrienkohlbecker]

Here is the same issue on iOS : http://imgur.com/ZG1hwAE

[Fayozjon]

Adrien

http://zetesispsiche.it/youtube_range

20.03.2015, 20:25, "Adrien Kohlbecker" [email protected]:Here is the same issue on iOS :

—Reply to this email directly or .

[perrygovier]

Thanks, could you please PM @tlancina an project that reproduces the issue. He's been working on similar bugs lately.

[TejasQ]

I too have been having this problem.

[tlancina]

I think these are separate issues on Android and iOS.

On Android, it is just resizing the view as the keyboard comes up (super ugly I know). To test, try starting a non-Ionic Cordova project and open the keyboard to see if you get similar stretching.

On iOS, use cordova.plugins.Keyboard.disableScroll(true) to prevent the jump as it is most likely the underlying browser trying to natively scroll the input into view. The jump is caused by Ionic then correcting/undoing that scroll, so we can scroll the input into view using JS to keep the header in view.

[aderowbotham]

Using cordova.plugins.Keyboard.disableScroll(true) isn't really a solution because that prevents ALL view scrolling to allow for the keyboard.

The problem I have is the same as in this: http://imgur.com/ZG1hwAE as posted by @adrienkohlbecker - where the view momentarily scrolls off the wrong way (down) revealing the black background.

It's true that cordova.plugins.Keyboard.disableScroll(true) fixes this, but it also prevents the desired natural scrolling _up_ of the view when focusing input fields that would otherwise be obscured by the keyboard (in the lower half of the view).

It's necessary to retain that (in many cases) whilst preventing the 'bounce down' seen in the imgur link above.

[kaililleby]

@aderowbotham did you ever find a workaround? Im having the same issue..

[aderowbotham]

@kaililleby No, not yet. We've shipped our app with this still happening. Makes it feel a bit shoddy!

[tlancina]

The solution is to use cordova.plugins.Keyboard.disableScroll(true), which disables the native UIScrollView from moving the entire UIWebView up offscreen and then make sure that any form elements in your app are within a scrollable area like ion-content (scrolling here being within the browser, not of the native components).

This is pretty confusing because there are really two scrollable containers at play here, the native view containing the entire browser and the scrollable elements within the browser itself. disableScroll ensures the native one stays put, and puts the responsibility on the elements in the browser, which Ionic takes care of for you.

[peterbsmith2]

I've got cordova.plugins.Keyboard.disableScroll(true) set in a app.run function and im getting view bouncing issues:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

[peterbsmith2]

@adrienkohlbecker have you found a solution?

[peterbsmith2]

I found the solution to my issue, its that I had ionic keyboard installed but not saved to the config.xml so therefore it wasnt registering when I built the app. So the solution was:

cordova plugin add ionic-plugin-keyboard --save (previously I hadn't used the save flag)

[tonyisid]

cordova plugin add ionic-plugin-keyboard --save do not work for me.

[siada]

I'm experiencing the same issue on iOS and using cordova.plugins.Keyboard.disableScroll(true) is not an option for me as the screen it affects is a static 100% height screen so there is no scroll.

Also adding the plugin cordova plugin add ionic-plugin-keyboard --save make no difference whether it's added to the app or not.

[videmort]

Hello, in ionic 1.3 still the same issue.

[samwidvicky]

Any progress in the issue, I m facing a issue the complete view bounce if focused field is behind keyboard in iOS on every key stroke

[videmort]

@bittusinghintruder use overflow-scroll true in the ion-content to fix that.

[samwidvicky]

@videmort Thanks for the reply will try with this.