In iOS7, chrome & safari, on focus of an input field, the page scrolls. How do I stop that?

Question

In iOS7, chrome and safari, on focus of an input field, the page scrolls.

I want the field to be focused if the user taps inside it and I want scrolling to still work, but the default scrolling that happens on input field focus, I want that to stop.

How can I do that?

Here is a sample JS fiddle: http://jsfiddle.net/6HvUh/

Code:

$(window).on('scroll', function(){
    $('input').animate({'top':100});
});

Answer 1

iOS safari will always try to center the focused input in the center of the visible screen. That, combined with position: fixed , which is a bit buggy in iOS, can cause strange effects.

My advice is, if possible, not to use position: fixed . You can change your page this way:

1. wrap your text, or everything scrollable, in a div with class 'scrollable'.
2. Change the position of your inputs to absolute (or the position of their container).

3. Add some CSS:

   div.scrollable { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }

    html, body { width: 100%; height: 100%; overflow: hidden; } 

Be aware that your inputs can never be hidden by the keyboard. If you put inputs near the bottom of the page you'll see scroll anyway.