Android - Keyboard covering input box - Even in Ch

Question

Is there an HTML5 css/js solution to bump up the window content when the soft keyboard appears?

For example, if you open up duckduckgo.com on an android device and enter text in the input field, when the soft keyboard appears it bumps the content up so it doesn't cover the input box.

Compare that to shouttag.com where the keyboard covers half the input box.

This occurs on our webview native app, but it also happens when viewing the site through chrome.

Update 1:

Looks like the fullpage.js api might be the culprit, digging more.

Answer 1

Ok here's how I fixed0red the issue, obviously the html anchors are specific to my sitch, so you can change as necessary, the important stuff is in the focus / blur anon fxs.

var $fpContainerWrap    = jQuery('.home-wrap .fp-tableCell div');
var $homeWrap           = jQuery('.home-wrap');

var topOffsetRaw = $fpContainerWrap.offset().top - jQuery(window).scrollTop();

var topOffset = '-' + (topOffsetRaw * 1.5) + 'px';

$('input').focus(function() { 

     $("#menu").animate({ top:topOffset }, "fast");
     $homeWrap.animate({ top:topOffset }, "fast");
     $('#section-changer').hide();
});

$('input').blur(function() {

    $("#menu").animate({ top:0 }, "fast");
    $homeWrap.animate({ top:0 }, "fast");
    $('#section-changer').show();
});