Automatic scroll on Input focus in Modals doesn't work on Android Chrome

[Domtaholic]

Hi,

we got a couple of longer modals with forms. When you focus a input the browser automatically scrolls to a position where you can see the input and the keyboard.

That works on the Nexus 6 like a charm on our normal inputs, but on the inputs inside a modal it doesn´t do anything on the first focus when the keyboard gets visible.

Any suggestions?

Cheers

[kkirsche]

Per CONTRIBUTING.md, bug reports should include an isolated example of the problem with instructions (as necessary) for us to reproduce the problem. The following can be used as a template on JSBin if that would be helpful.

Thanks for your understanding and cooperation!

[cvrebert]

What version of Android and what version of Chrome?

[Domtaholic]

Thx for the reply,

i updated the jsbin:

http://jsbin.com/juguvuwexi

Now if you focus one of the inputs the browser scrolls to a position where the keyboard is below the input field so you can see it while you typing.

Now open the Modal and try the same, on the Nexus that doesn´t work as expected.

Android Version: 5.1.0
Chrome: 40.0.2214.89

[Domtaholic]

Is there any news about this? Can you confirm the issue?

[cvrebert]

@twbs/team Anyone have an Android device to test this with?
That said, we're kinda at the mercy of the browser here. Besides filing a Chrome bug, I'm uncertain there's much we'll be able to do much here that wouldn't either be super-hacky or necessitate a complete rework of our modals.

[cvrebert]

Forked for permissions reasons: http://output.jsbin.com/milofi/1

[twbs-lmvtfy]

Hi @cvrebert!

You appear to have posted a live example (http://jsbin.com/milofi/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 24, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 27, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 30, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 33, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 36, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 39, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 42, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 45, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 48, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 51, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 54, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 56, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 59, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 62, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 65, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 68, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 71, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 90, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 93, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 96, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 99, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 102, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 105, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 108, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 111, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 114, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 117, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 120, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 122, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 125, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 128, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 131, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 134, column 14: E013: Only columns (.col-*-*) may be children of .rows
• line 137, column 14: E013: Only columns (.col-*-*) may be children of .rows

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[cvrebert]

With those row errors fixed: http://output.jsbin.com/yihawi

[cvrebert]

Confirmed in Chrome 49.0.2623.91 on Android 5.1.1.

[cvrebert]

Tried making the scrollable layer taller to see if that would allow Chrome to scroll: http://output.jsbin.com/kirevu/quiet
But it had no effect on the scrolling when tapping the last <input>.

[cvrebert]

Filed Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=595210

[mingyu717]

could I know if there is any Work-around of this issue?

[fariazz]

Does anyone know how to fix or work around this?

[Herst]

Issue is assumed to be fixed since Chrome 67 (see the last comments in the filed Chrome bug).