20

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, pickers etc.

Now, when the iOS 7 shining white keyboard appears, all the bottom fixed elements in the webpage (such as, confirm buttons) are scrolled upward, as if the 'top' of the virtual keyboard is the new bottom of my UIWebView. This is a substantially different behavior from iOS6.x

Is there any magic trick to make the virtual keyboard behavior work like it used to, without injecting JS/CSS to the webView?

Francesco
  • 315
  • 1
  • 3
  • 9

4 Answers4

44

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" />
hshepherd
  • 995
  • 9
  • 14
  • Glad to help! Feel free to accept the answer so others can see :) – hshepherd Sep 26 '13 at 18:59
  • 3
    Have you tried this with a landscape app? "device-height" when in landscape is still 1024 so the bottom of the screen is out of view. – Kevin Zych Sep 30 '13 at 22:07
  • My app rotates to landscape when turned and I haven't seen this issue. If I see it I'll let you know. – hshepherd Oct 03 '13 at 14:21
  • 7
    I haven't accepted the answer yet because this didn't solve my problem. Actually, it made no difference. My experience was similar to what Pawel describes in the other answer, and as a quick fix I ended up having two different stylesheets as well. – Francesco Oct 07 '13 at 09:33
  • We had a similar problem with top absolute positioned elements and In our case an acceptable solution was to put height to 768 in the meta tag. – nylund Nov 04 '13 at 15:10
  • 1
    I am also facing the same issue in iOS7 in native app, but not able to fix with above code. I am using url to load on the webview,any help? – Sudheer Kumar Palchuri Dec 31 '13 at 06:22
  • 1
    <3 Works amazing for me on iOS7, thank you so much... This has solved years trouble lol... – Ilan Kleiman Jan 19 '14 at 04:48
  • 1
    Tried this but did not worked for me The only thing that helped me is changing the fixed elements to absolute and update the top value with the scroll value – nicolas Feb 11 '14 at 08:28
  • 1
    Did not work for me. In fact target-densityDpi is no longer supported. I'm getting a "Viewport argument key "target-densitydpi" not recognized and ignored." by the Safari browser. – Moos Apr 14 '14 at 20:15
  • 1
    Saved mine too. Amazing how I never would fix it using a meta tag. – Pedro Gabriel Oct 28 '14 at 18:42
8

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);
});
basarat
  • 261,912
  • 58
  • 460
  • 511
  • Forcing the scroll like this worked for me. The viewport fix below *can* work, but can also cause problems with Cordova apps, where width=device-width, height=device-height, can lead to scrolling problems. https://issues.apache.org/jira/browse/CB-4323 – zungaphobia Jul 17 '14 at 19:43
  • This solution seems to be the only one that doesn't break anything. You could also check the user agent to limit this to only mobile devices. var is_mobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); – Dominique Alexandre May 05 '15 at 14:26
6

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

Pawel Lipka
  • 69
  • 2
-1

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.

David Shears
  • 96
  • 1
  • 2
  • 8
  • 1
    Fooling around with the meta's content, it seems minimum-scale is the problem. When ignored the position fixed issue exists. When set to a value less than 1.0 the position fixed issue exists. When set to a value greater than or equal to 1.0 the position fixed issue is resolved. – David Shears Oct 11 '13 at 15:34
  • This is not an answer, but merely an observation; thus belonging as a note instead. – SikoSoft Aug 01 '14 at 12:06