iOS 7.1 input field positioned below virtual keyboard forces zoom on focus

Question

I am writing a chat application using Cordova, and the chat view has an iMessage-like input field at the bottom of the page. In iOS 7.0, clicking on the field resized the window and brought the input field up above the keyboard. In iOS 7.1, clicking on the input field just pushed everything up from the bottom, and doesn't resize the window.

My viewport is set to:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />

When positioning the input relative to the top, the resize doesn't happen. However, positioning the input low enough to line up with the top of the keyboard does result in the no resize error. This can be replicated by building the Ionic frosted glass demo and changing the footer from

<footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>

to

<footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>

In www/index.html

This replicates the error in iOS7.1, and works as expected in iOS 7.0.x. I have followed the suggestions here, but they thread is dated and didn't end up working. Thank you in advance for any insight!

what is your value on cordova/phone gap "KeyboardShrinksView" preference? — Martin van Haeften, Mar 20 '14 at 16:40
I have tried with true and false, it doesn't make a difference. — Joe Fatora, Mar 20 '14 at 17:57
Try this? http://stackoverflow.com/questions/19169115/phonegap-keyboard-changes-window-height-in-ios-7 — Evan Shortiss, Mar 20 '14 at 20:53
That wasn't exactly the fix that worked for me. I am testing a solution now and will update once I've confirmed it works. Thanks again for the input! — Joe Fatora, Mar 25 '14 at 06:41
Gave a hacky fix for this http://stackoverflow.com/a/23435204/3597396 - best of luck! — unboundev, May 02 '14 at 19:15
I answered below with an outline what I am using as a 'fix'. It is similar to @ajsnaps answer and I modified his response since it is a nice, similar solution in jQuery and should be accessible to more people than the Angular way. — Joe Fatora, May 05 '14 at 20:12

score 0 · Answer 1 · answered Apr 04 '14 at 06:53

0

Have ou tried setting width explicitly? Like mentioned here?

<meta name="viewport" content="width=device-width">

answered Apr 04 '14 at 06:53

Barzille

395
1
5
19

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Edit: Ionic has fixed this in beta 4, so these hacky fixes shouldn't be necessary :) Big up to the Ionic team for recognizing the issue and fixing it!

What I am going with for now is similar to @ajsnaps answer above. I do not consider it a good solution because it has bugs (similar to those pointed out in the other thread).

I will try to update this with something better when I figure it out, and I'll leave this open in case someone comes along with a better solution.

$("input").on('focus',function(){ 

 //set brief timeout to let window catch up
 setTimeout(function(){

 //pull down the message area (scrollPane) and header (titleBar)
 //works on both 3.5" and 4" screens
 $("titleBar").css('top', '215px');
 $("scrollPane").css('top', '273px');

 },20); 

});

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimeout(function(){

 //push the top back up
 $("titleBar").css('top', '0px');
 $("scrollPane").css('top', '56px');

 },20); 

});

Additionally, I made sure that the header is reset after navigating back from the chat view.

Hope this helps!

iOS 7.1 input field positioned below virtual keyboard forces zoom on focus

2 Answers2