input textbox hidden behind keyboard on android Chrome

Question

I have a mobile web page of the following format:

header - logo etc - absolute positioned

content - scrollable, absolute positioned

footer, 40px abs

Answer 1

There are a few ways you could solve this, the most obvious solution is to use javascript to set a hash on the URL.

You can see an example of that here: http://jsbin.com/emumeb/24/quiet Code: http://jsbin.com/emumeb/24/edit

For a slightly more complex example, if you have a fixed header and footer, you might want to use targets to change the appearance of the page when a hash is set.

Depending on your layout you might need to get a little more creative, you could set a class on the body for focused vs non focused state and change the UI accordingly, but it starts to get tricky to maintain a good experience across mobile, desktop etc

Heres an example http://jsbin.com/emumeb/30/quiet Code: http://jsbin.com/emumeb/30/edit

Obviously this is something chrome should deal with itself (similar to the UX iOS has), so I've raised a bug against Chrome - https://code.google.com/p/chromium/issues/detail?id=270018&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.