Ionic-framework: bug: Long forms causing erratic scroll behavior on iOS

[DavidFrahm]

Type: bug

Platform: ios 8 webview

Creating this issue after discussion and confirmation with several others in this forum thread: http://forum.ionicframework.com/t/click-a-input-field-whole-app-jumps-down-and-back-to-the-original-place/10876/

Given that you have an Ionic app running in iOS (simulator or on device)...
When you tap to select inputs further down the form, where they occupy the space where the keyboard will display when it opens...
Unexpected behavior is of an erratic jump of the screen, where the amount of jump increases the further down the input is on the form.

Expected behavior is simply no erratic/jumpy screen.

Note that AFTER the jumpy screen, the form scrolls up smooth like normal to bring the focused input element into view above the keyboard.

Workaround is to use the Keyboard plugin, and disableScroll(true) to disable native scrolling. (Although I am new enough to Ionic that I'm not sure what the negative impacts of that might be.)

Codepen: http://codepen.io/davidfrahm/full/yygEWZ
Screencast: http://cl.ly/0v3R1p19181S

[RyanWarner]

:+1: having the same annoying bug.

[wlkns]

Having the same bug, and others, but they seem isolated to iOS 7 / iPhone 4.

My iPhone 6, iOS 8+ works correctly.

[DavidFrahm]

When I use the disableScroll() fix -- as mentioned in the forum thread mentioned in the OP -- then I end up with fields towards the bottom of the form that cannot be scrolled up above the keyboard.

This means those bottom fields cannot be accessed or used, unless the user figures out that if you can tap something to cause the keyboard to dismiss, then you can tap a bottom field which causes the keyboard to overlay the input but you can type. Not acceptable by any means, just sharing the behavior here in case it helps anyone.

This is really bad. Not sure how to convey that to the Ionic team, cause I'm sure they have a million people telling them _their_ bug is really bad. Trying to figure out how to help solve this problem, too. Guess I will start by poking around the source.

[tlancina]

Hey @DavidFrahm taking a look at the video you posted, it looks like you didn't have native scrolling disabled, which means the WebView is trying to scroll that input into the middle of the view. Unfortunately the overflow scroll used by the WebView shifts the entire page up, meaning all content gets shifted up and off screen, including the header, which often looks very weird.

What you are seeing with that flicker is Ionic trying to undo the overflow scroll as quickly as possible so it can scroll to the correct position with javascript. This is not ideal, and the reason the keyboard plugin has disableScroll is so that the native scroll event can be cancelled before it's ever visible.

Now, you say that calling disableScroll causes some inputs to become unreachable. Is your form in a scroll view like ionContent? If so, this sounds like it could be a bug in either the Ionic keyboard plugin or Ionic's keyboard code. What should be happening is the keyboard plugin will emit an event with the height of the keyboard so Ionic can resize/shrink the scroll view. Then covered inputs can be scrolled into view.

Would it possible to have you post some code that replicates the issue? I just downloaded the codepen you posted and tried it out with disableScroll(true) on iPhone 5, 6, and 6+ simulators with no issues.

Thanks!

[DavidFrahm]

@tlancina Thanks so much for your reply. I created a new app, added the "long form" view from the Codepen, and sure enough it works great after I disableScroll(true). (I know I did this before and it was buggy, so wish I understood that but I'll just be happy that it works today.)

So hopefully that means there's just something wrong with my real app. I spent a few minutes this morning looking at the markup and that all looks good, with an ion-content around the form. But maybe I don't know what wrong looks like for some other elements.

What could I share with you that would help? I could give you access to the Bitbucket git repo if you'd like to have a look for yourself.

[DavidFrahm]

Also, does the feature in config.xml make a difference?

ngCordova docs don't mention it, but the github readme says you need this:

<feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true"/>
</feature>

I don't see any difference, with or without it.

[tlancina]

Hey David, why don't you zip up the project and email it to me at tim (at) drifty.com and I'll take a look at it. If it's huge I can make a Bitbucket account, just let me know.

If I recall correctly the important thing there is the onload="true" which will initialize the plugin when the app loads rather than the first time the plugin is called from javascript. I doubt it would make a difference in this case :)

[DavidFrahm]

@tlancina Well, now I am unable to reproduce the issue. That's a good thing, except I wish I knew what changed to fix it.

I did do a bunch of cleanup this week, and some of that was correcting markup structure, so I'd guess that was it. Looking back at my git history, I don't see that I was ever missing an ion-content around the forms that were having the issue, but anyway its fixed now.

Thanks a ton for your advice and assistance on this.

The app was just approved by Apple today, and Google Play shouldn't be far behind. So we'll be releasing it soon. Couldn't have done it without Ionic! (I bet you hear that every day.)

[AntonKL]

We're interfering the same problem. What is the final solution to this issue, as it's closed? #0a6c323 didn't seem to fix the problem.

[pvantrepote]

I have the same issue. My application is done, just need to fix this issue :(
Any progress on this issue?

[wlkns]

Still have same issue, I've had to release my app with this bug but it keeps coming up.

[AntonKL]

@arkin- @pvantrepote

This will fix your form problems. Tweak the js if you need AccessoryBar for your keyboard.
It's the official ionic recommended fix, it's just unmentioned in this issue.

Install ionic keyboard

$cd to your project
$cordova plugin add com.ionic.keyboard

Add this code to your application js file

// Fix scroll issue on iOS
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            // Hide the accessory bar above the keyboard
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            // Disable keyboard auto scroll
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if(window.StatusBar) {
            // Set the statusbar to use the default style, tweak this to
            // remove the status bar on iOS or change it to use white instead of dark colors.
            StatusBar.styleDefault();
        }
  });
});

Add this to config.xml

  <feature name="Keyboard">
    <param name="ios-package" value="IonicKeyboard" onload="true"/>
  </feature>

[niyando]

I was experiencing a similar issue. jumpy scroll and when you focus on some input while the keyboard is up, the scroll will be erratic and pushes the target input out of the viewport (under header bar).

Just disableScroll didn't help. It did fix the jumpy scroll but I was still having issues with erratic scrolling on long forms when you tap on input while the keyboard is up.

To fix this, I additionally had to do

.config(function($ionicConfigProvider){
  $ionicConfigProvider.scrolling.jsScrolling(false);
})

Not sure why this was required after disabling scroll.
Hope this helps.

[Tobiaswk]

This is still a problem. It is not fixed so I do not know why this has been closed.

It is happening when you have many input elements and you have to scroll to reach the bottom input elements. This is almost impossible currently.

Example;

Above is with overflow-scroll="false" on ion-content and with native scrolling.

[ahgentil]

I'm also facing some weird behavior, and I couldn't find yet a solution.

After ionic v1.2, native overflow scrolling is the default.

I tried both native:
cordova.plugins.Keyboard.disableScroll(false);
and
$ionicConfigProvider.scrolling.jsScrolling(false);

and JS:
cordova.plugins.Keyboard.disableScroll(true);
and
$ionicConfigProvider.scrolling.jsScrolling(true);

but now luck.

[Tobiaswk]

I'm going to create new issue. I'm seeing above problem sometimes. I also can successfully
reproduce a problem were scrolling ceases to function. It only happen with list that are longer than what can fit on a device display. Selecting items at the bottom of the list causes scrolling to stop working. Hereafter it is not possible to scroll up the list again.

[inxunxa]

any luck solving this problem??

[Tobiaswk]

Yes. It turns out my problem was that JavaScript scrolling was enabled for all my platforms. This creates problems on iOS 8+.

See; https://github.com/driftyco/ionic/issues/5806