New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 4 users

Issue metadata

Status: Assigned
Owner:
OOO until 07/29
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug



Sign in to add a comment

On screen keyboard breaks scrolling while using the fullscreen API

Reported by szd...@gmail.com, Mar 22 2017

Issue description

Steps to reproduce the problem:
1. Open the attached html files in Chrome for Android.

2. First example displays an input field aligned to the bottom of the page. If you tap it, onscreen keyboard will be displayed and the view will be resized so the input field will be shown above the onscreen keyboard. However, if you switch into fullscreen mode using the HTML5 fullscreen API and tap the input field, then it will be hidden behind the onscreen keyboard.

3. The second example displays many input fields. If you tap any of them near the bottom of the screen then it will be scrolled into view and shown above the onscreen keyboard. However, after switching into fullscreen mode when you tap the  input field it will be hidden behind the onscreen keyboard. Moreover, the view cannot be scrolled (dragged) to make the focused input field visible.

So there are two issues in fullscreen mode when onscreen keyboard is visible: the view's size is not updated and it cannot be scrolled.

What is the expected behavior?
Onscreen keyboard shouldn't hide the focused input field.

What went wrong?
Onscreen keyboard hides focused input field because the viewport's dimension is not updated AND it cannot be scrolled.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 5.1.1
Flash Version: 

This issue is similar to  issue 453259 , but this is related to the Fullscreen API while  issue 453259  is related to webapps (standalone mode). That's why I was told to file this as a new issue.

Use cases:
HTML5 games use the fullscreen API to provide better user experiment. Fullscreen API is required even in webapps, because webapps currently start in standalone mode (status bar still visible).
HTML5 games might need text input for various reasons: user registration, character customization, in-game chat etc.
HTML5 game can be canvas based or built from regular HTML components (for instance a sports manager game does not need custom canvas GUI).

Workarounds:
Exit fullscreen mode if an input field receives focus / restore fullscreen mode if focus is lost (bad user experience).

Currently, there is no way client-code javascript can determine if onscreen keyboard is displayed in fullscren or not because viewport dimensions are not updated.
In comparison, Firefox for Android updates viewport dimensions so the first example is working. Scrolling is broken in Firefox too (second example).
 
crosk.html
1.0 KB View Download
crosk2.html
1.5 KB View Download

Comment 1 by bokan@chromium.org, Mar 22 2017

Labels: -Pri-2 Hotlist-Input-Dev Pri-3
Owner: bokan@chromium.org
Status: Assigned (was: Unconfirmed)

Comment 2 Deleted

Having the very same issue on a HTML command line UI type application. The input text field is always at the bottom, and vertical screen space is super valuable so fullscreen mode is essential. Unfortunately, the command line is obfuscated by the soft keyboard in fullscreen mode.
Hi,

Resolving this issue is critical to my "text adventure game engine" type application working. This works fine on desktop OSs (without virtual keyboard), but on Android, it is terribly broken.

Please fix this issue. I have created a very good demonstration of this issue as described below.

Phone Used : Google Pixel 2
Operating System Used : Android 8.1.0; Pixel 2 Build/OPM1.171019.013
Browser Used : Chrome (Android) 63.0.3239.111

1) On an Android mobile phone (without hardware keyboard) ....
1) Navigate to http://eeyo.io/advdemo1
3) Click to start the adventure game.
4) Double clicking in the chrome window (double tap touch) will maximise the window (via an internal call to requestFullscreen() ) - because scrollable vertical space is REALLY important in text adventures. Ensure that the screen is now in fullscreen mode (NO NAV BUTTONS AT BOTTOM, no URL BAR AT TOP).
5) Now click the panel to put focus on the text input widget. 
6) OBSERVE, the bottom part of the play area is now not visible. 
7) Swipe up from the bottom of the screen.
8) Press Back Soft key (to exit full screen mode). Be careful not to double tap and re-enter full screen mode.
9) Click screen (single touch event). Now the software keyboard does not overwrite the bottom of the play area. The full play area is visible (but there is very little vertical space available.

A resolution to this bug should allow fullscreen mode to be used without hiding content behind the keyboard.

This bug has been open for 11 months now. Without a resolution to this bug, a mobile client that makes optimal use of screen space simply is not possible.

Correct Behaviour (in non fullscreen mode):

https://www.youtube.com/watch?v=B-k8mJ20ozY

Demonstration of 704070 bug (in fullscreen mode):

https://youtu.be/veE2LJgPXNI


correct scrolling down to prompt.png
86.8 KB View Download
keyboard obscuring prompt - no scrolling possible.png
88.0 KB View Download
Labels: -Pri-3 Pri-2
Yeah, that seems pretty bad. I can't prioritize it in the next 2-3 weeks but I'll take a crack at it after that.
Ping!
Any progress on this one? It's a very annoying one indeed.
Though I don't know what change is responsible, the repro in #4 appears to be working for me in 69.0.3475.0 (Dev channel). Could you  please try dev channel on your own repro and see if that's working for you?

Sign in to add a comment