Prevent scrolling on keyboard display iOS 6

Question

I am running into a strange issue. I am currently producing a mobile web app using HTML5 and CSS3 for iOS 6 only.

However, when an input element receives focus and the soft keyboard is displayed, the window is scrolled so that the input is not obscured by the keyboard (even though it won't be in any instance).

I have read on SO and via Google that one can add the following to prevent this behaviour (when viewing this inside a UIWebView):

input.onfocus = function () {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
}

However, it seems that in iOS 6, even though the window is initially scrolled to 0,0, it is then once again scrolled to centre the focused element. Has anyone else come across this and do they know of a fix for iOS 6?

score 20 · Accepted Answer · answered Jan 12 '13 at 19:47

I hit this issue too. The following works on iOS 6:

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/>

Basically, since Safari decides whether or not to scroll the page based on the textbox's vertical position, you can trick it by momentarily moving the element above the top of the screen then back again after the focus event has completed.

The drawback is that the element vanishes for a fraction of a second. If you want to work around that, you could dynamically insert a clone of the original element at the original location and then remove it in the webkitRequestAnimationFrame callback.

Sorry for the late reply, I only just got the SO notification about this! It works well, thanks for the fix. — BenM, Mar 01 '13 at 17:36

score 1 · Answer 2 · answered Jan 11 '13 at 16:04

1

Could it be a timing issue?

Try wrapping it up in a timeout to ensure that it's firing after the native events are firing.

input.onfocus = function () {
    setTimeout(function() {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }, 50)
}

answered Jan 11 '13 at 16:04

Will Tomlins

1,436
16
12

What if you set it to even larger? `2em` – Kernel James Jan 12 '13 at 02:16

David Douglas · Answer 3 · 2016-01-06T17:51:44.360

Update: While the accepted solution worked with UIWebView, the newer faster WKWebView has since arrived. And if you are using the latest version of Cordova for iOS you can enable WKWebView for iOS 9 devices, but by default the view will still scroll up. To fix this just add the Keyboard plugin (no CSS hacks needed anymore):

Add Cordova plugins within Terminal:

cordova platform add ios@4
cordova plugin add cordova-plugin-wkwebview-engine --save
cordova plugin add cordova-plugin-keyboard --save

Set iOS preference to use WKWebView in Cordova's config.xml

<platform name="ios">
    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
</platform>

Then insert iOS keyboard preferences in Cordova's config.xml

    <preference name="KeyboardShrinksView" value="true" />
    <preference name="DisallowOverscroll" value="true" />

More detail on iOS preferences are listed on Cordova docs: https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html

score -4 · Answer 4 · answered Jan 10 '13 at 02:56

-4

Set the input's font-size style to be 1em or higher.

<input type=text style="font-size:1.2em">

answered Jan 10 '13 at 02:56

Kernel James

3,752
25
32

Prevent scrolling on keyboard display iOS 6

4 Answers4