Cordova/Phonegap 3.1 keyboard (still) overlays focused form fields - iOS 7

Question

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).

Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.

When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.

Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).

Playing with the "fullscreen" preference won't solve the problem.

Answer 1

Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.

Viewport meta tag:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width" />

JavaScript run after load:

document.body.style.height = screen.availHeight + 'px';

And that's it. Works on iOS 7 and I have no idea why.

Answer 2

Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin

Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:

updateScroll: function(e){
    var el = $(e.currentTarget);
    var offset = -$(".scrollerWrap").height() + $(el).height();
    $(".scrollerWrap").scrollTo(el,{offset: offset});
}

Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.

Answer 3

Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.

Tweaks were applied on the wrapper class/id which is containing the content of the app.

position: relative;
overflow: hidden;
height: 460px;
width: 320px;

Note - Height and width are judged dynamically depending on the device height and width

height = window.innerHeight
width = window.innerWidth

By using jQuery selectors height and width are appended to wrapping class/id.