iOS 7 input elements moving fixed positioned elements

Question

I\'m trying to recompile an app for iOS 7, since nothing of the old one works so far. One of the many problems is that I\'m using some inputs inside UIWebViews. Text inputs,

Answer 1

I ran across exactly the same problem & gave up after two days of experimenting. It seems that: a) all bottom-fixed elements go upwards so that their bottom offset is relative to the top edge of the keyboard c) all top-fixed elements stay in their original position (do not move upwards as they used to) - note that top-absolute elements work ok.

The only solution I found was to have a custom iPad stylesheet that replaces all fixed elements with absolute elements, sets the css bottom property to auto and uses top instead

Answer 2

In our case this would fix itself as soon as user scrolls. So this is the fix we've been using to simulate a scroll on blur on any input or textarea:

$(document).on('blur', 'input, textarea', function () {
    setTimeout(function () {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});

Answer 3

Opposum, your solution worked for me but only when the scale was set to 1.0. If I set it to 0.9 then it would be like it was before your suggested fix. I set initial-scale, maximum-scale, and minimum-scale to 0.9 and the bouncing effect of the fixed objects when the keyboard appeared was still happening.

Answer 4

This fixed the problem for my cordova app. I'm not sure if it applies to you but just in case.

Check your html meta tags for something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

Replace it with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />