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!
Have ou tried setting width explicitly? Like mentioned here?
<meta name="viewport" content="width=device-width">
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!