Question

In iOS, even for textareas contained in a div with position: fixed, when a textarea has focus, the OS ensures that it is visible (which sometimes means sliding the entire browser window up) so that the textarea isn’t hidden by the keyboard.

In Android browsers (I’ve tested the stock browser in both 2.3 and 4.0 as well as Chrome in 4.0), this does not happen. The textarea gets covered by the keyboard, and the user can’t see what she’s typing.

As a temporary workaround for Android only, I set position: fixed on textarea:focus and move it to the top of the screen so that it’s guaranteed to be visible.

Are there any more elegant solutions that maintain the integrity of my layout?

I made a little example in jsfiddle. View in an Android browser to see what I mean: http://fiddle.jshell.net/5cvj5/show/light/

Answer 1

What I ended up doing, and what I found that Facebook does to overcome the same challenge, was to add a spacer block element below the textarea when it receives focus and then to scroll to the bottom of the view, like so:

var android_spacer = $('<div/>', {
    'class' : 'android_spacer'
}).css({
    'width'  : '100%',
    'height' :  '200px'
}).appendTo($('#parent_view'));

$('#the_textarea').on('focus', function() {
    $(this).after(android_spacer);
});

$('#the_textarea').on('blur', function() {
    $('.android_spacer').remove();
});

Note that there’s only ever one spacer onscreen at a time.