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]

👍 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?