bug: ionic 1.0 / Native scrolling for Android makes keyboard hide input field

[mica16]

Type: bug

Platform: android 4.4 webview

Using ionic 1.0 release and a basic form, when clicking on an input field, the keyboard is opened and hides all the input field. There's no automatic scroll.

It's annoying since the user can't even scroll at all (the screen is locked) to show the field.

[lastikas]

This is really an issue.

The keyboardFocusIn function in keyboard.js disables touch events after the keyboard is shown causing the scroll to 'freeze'
It would be nice not to do that, a possibility I tested was to involve the 'offending' block in a if statement like this:

  if (!ionic.DomUtil.getParentOrSelfWithClass(e.target, 'overflow-scroll')) {
    // any showing part of the document that isn't within the scroll the user
    // could touchmove and cause some ugly changes to the app, so disable
    // any touchmove events while the keyboard is open using e.preventDefault()
    if (window.navigator.msPointerEnabled) {
      document.addEventListener("MSPointerMove", keyboardPreventDefault, false);
    } else {
      document.addEventListener('touchmove', keyboardPreventDefault, false);
    }
  }

But this only solves the frozen scroll problem. There's still the auto scroll to the focused input problem.
This happens because the scrollChildIntoView is assigned to NOOP, which does nothing, as seen in scrollViewNative.js in the __initEventHandlers function

     // should be unnecessary in native scrolling, but keep in case bugs show up
     self.scrollChildIntoView = NOOP;

I'm trying to come up with something but it's kinda tricky

In my opinion this is a major issue that renders native scroll impossible to use in production right now

[felquis]

👍 There's also a post in the forum http://forum.ionicframework.com/t/keyboard-issue-with-ionic-v1-0-0/24907

[mathiasmuller4sh]

Same issue with android L 5.1.1

[Leftyx]

Same issue here with android 5.1 (Nexus 5).

[tobbbe]

Any solution to this? Will it be fixed in 1.0.1? I dont want to remove native scrolling because its too good :)

[felquis]

Tobbe which version are you using?
Em 09/06/2015 12:40, "Tobbe" notifications@github.com escreveu:

Any solution to this? Will it be fixed in 1.0.1? I dont want to remove
native scrolling because its too good :)

—
Reply to this email directly or view it on GitHub
#3727 (comment).

[mica16]

@felquis 1.0.0 has the bug

[tobbbe]

Yup I'm on 1.0.0

[mica16]

Native scrolling is the best new "feature" in the 1.0.0.
Can't use it because of this critical bug ;)

[felquis]

Thanks, is this still in the nightly build? :/
Em 09/06/2015 13:13, "Tobbe" notifications@github.com escreveu:

Yup I'm on 1.0.0

—
Reply to this email directly or view it on GitHub
#3727 (comment).

[perrygovier]

@tlancina, you were looking in to something like this, right?

[tlancina]

Keyboard stuff relies heavily on JS scrolling, if you guys disable the Ionic keyboard code with ionic.keyboard.disable() do you still have issues?

[mica16]

@tlancina I will test it right now and let you know :)

[mica16]

I tested with ionic.keyboard.disable(); as suggested.
Same result => doesn't solve the issue

For information, I have this too: cordova.plugins.Keyboard.disableScroll(true);

Tested on Ionic 1.0.0 release.

[jacargentina]

I'have an urgency for this to be solved too: if i can help somehow?

[mica16]

@jacargentina I've not found a fix or workaround yet...

[jacargentina]

Hope this helps: debugging it seems that scrollChildIntoView is invoked, but it's neved executed for a given input

[jacargentina]

ionic.views.ScrollNative does this:

self.scrollChildIntoView = NOOP;

I'm not aware on the differences on behaviour of having jsScrolling(true) vs. jsScrolling(false), but i think maybe in this case scrollChildIntoView should do the needed work?

[jacargentina]

#3393 is a duplicate of this

[lastikas]

I haven't had the time to follow this and the forum's thread for a while now

Please test this fix suggestion, and let me know if it solves the problem without causing others
http://forum.ionicframework.com/t/keyboard-issue-with-ionic-v1-0-0/24907/16?u=lastikas

[jacargentina]

@lastikas It works, but have 2 little things to make it nicer:

1. The input is not visible until you press a key after the initial focus
2. When activating, there is a ugly visual effect which makes all the view to be "crushed" by some ms. and then it goes back to normal

[tlancina]

If someone wants to post a minimal test case on codepen I'll take a look. scrollChildIntoView shouldn't be called if ionic.keyboard.disable() is used, and the web view should just scroll the input into view.

[mica16]

@tlancina Actually, when you set ionic.keyboard.disable(), you can now scroll across the form while you have the keyboard opens. That's good but that's not the point of the issue.

What we would like is to prevent an input text (at the bottom of the screen) to be hidden by the keyboard on click.
An automatic scroll should happen so that the input remains visible, so that we can control what we type.

[jacargentina]

@lastikas I think your code is very close to be the solution to this; if you had some time to fix the 2 observations i made before would be super!

[felquis]

@tlancina I made a codepen http://codepen.io/felquis/pen/aOyYEZ/ --> to open in your phone http://s.codepen.io/felquis/debug/aOyYEZ

I also created a repository git@github.com:felquis/scroll-bug-3727.git

How to reproduce:
1 - Open app
2 - Scroll I little
3 - Click in any lego item
4 - Here is the form, scroll a little
5 - Now click to focus an input
6 - The scroll is lost, you can't scroll, and the keyboard isn't open.
7 - To be able to scroll, focus the first input and leave the first input
8 - Now you can scroll again

Hope it help you.

[vasumahesh1]

Hey Guys,

So is this fixed? How can I get these changes on my current project? - Sorry a bit noob here and facing this issue.

[mica16]

bower update ionic :)

Make sure your bower.json targets Ionic's master branch.

[felquis]

I testes it yesterday, there's a 1s delay on Android to start scroll to
input. Something huge happens on touchend, and it take almost 1s to start
scroll.

Also there's some warnings "forced synchronous renderings"

But it's fixed. And works fine.

I tried to save de timeline recorded with DevTools, but looks like there's
a bug I'm unable to save and make a detailed report about performance in
this case.
Em 19/06/2015 09:29, "Michael AZERHAD" notifications@github.com escreveu:

bower install ionic :)

Make sure your bower.json targets master branch.

—
Reply to this email directly or view it on GitHub
#3727 (comment).

[tlancina]

@felquis if it's an older Android device that's normal, since the actual web view doesn't report its correct size right away (and by right away I mean it takes upwards of 1s on some older devices) once the keyboard has opened. That "something huge" is quite possibly just the keyboard appearing.

Thanks for profiling it, there is so much stuff happening it's a challenge to adjust for the keyboard coming up and still get scrolling at 60fps in a way that will work reliably and quickly across devices.

If you're seeing significant lag on a modern Android device let me know or open a new issue with what device you're seeing it on and a simple codepen reproducing it and I'll take a look.

[felquis]

Thanks @tlancina, I use Android 4.4.4, Moto X G1, chromium 33. It is probably faster in modern webviews :)