3

I have a fixed navigation bar at the bottom of my page, which for the most park works fine in mobile safari. However, I've added a text input field to it, and now when the text input is focussed on, it causes the keyboard to appear, which forces the fixed navigation to, for some reason, move up on the page further above the keyboard, adding about 60px of whitespace between it, and the keyboard. In addition, it also sets the element to relative position until the input field is no longer focussed on, and the keyboard goes away.

To be clear, the issue I'm trying to solve is not that the fixed navigation moves up while remaining at the bottom of the visual field, touching the top of the keyboard. Rather, it's that it's moving an additional 50 or 60 pixels above the keyboard, showing white space between it and the keyboard, making th page appear broken.

Screenshot of the issue I'm trying to solve in the long run.

This question seems to be a similar issue with a supposedly working solution, so I went ahead with it in jquery.

The goal here is to stop the fixed navigation from being pushed up to the middle of the page when the virtual keyboard appears, by disabling scrolling abilities, keeping the fixed navigation touching the bottom of the page, rather than being pushed up. This is done by changing the body's overflow to hidding when the user focuses on the text input.

So here's the programming issue: The jquery I've written (to disable scrolling by setting the body to overflow:hidden while the input field is focussed on) in works perfectly in firefox, but in mobile safari it does nothing:

$(document).ready(function(){
$(".mobile_text_focus_fix").focus(function(){
$("body").css("overflow","hidden");});  
$(".mobile_text_focus_fix").blur(function(){
$("body").css("overflow","visible");});
});

The jquery above uses this html:

<input type="text" class="mobile_text_focus_fix"></input>

Firefox screenshot:

enter image description here

As I mentioned, it's working in Firefox, and above is a working example of what I'm trying to do, but in mobile safari, none of the jquery above seems to work.

Any idea as to why this wouldn't be working on mobile safari, but works in firefox?

Community
  • 1
  • 1
Eric
  • 2,004
  • 6
  • 23
  • 33
  • 1
    Can you give us a bit more markup please? Or prepeare [fiddle](http://jsfiddle.net) to let us play around. – yckart Mar 06 '13 at 00:50

1 Answers1

0

You must add a meta viewport-tag with a pre-defined viewport width:

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

That should not prevent the scrollability but fixes your problem...

Update

Otherwise try to prevent the default touch behavior...

yckart
  • 32,460
  • 9
  • 122
  • 129