wild scroll input android

Question

I am working on a responsive website, which has a different stylesheet for either mobile or desktop. Everything looks nice and works great, until text inputs are interacted with on mobile. They show up as they should. But once clicked (ehrm.. touched), I found that the browser in Android starts scrolling like crazy, and the same happens when typing. The text is entered in the input, though, and the soft keyboard/focus on the input is not lost.

My project can be found over here: http://www.gortzfruit.nl/new/

The problem is that I have been searching for a solution for a while now, and found similar issues of which the solutions were not working out for me. Some topics -and solutions- I have been looking into were:

https://github.com/scottjehl/Device-Bugs/issues/3 -Here it is suggested that the problem lies within positioned elements. Especially absolute within fixed positioned elements. This is recurring in my design, but once removed it did not solve the problem.

Android Browser textarea scrolls all over the place, is unusable -This one suggests that the problem is with the css-properties -webkit-transform: translate3d(0, 0, 0); and -webkit-backface-visibility: hidden;. I did not include these by myself, but I thought a Google Maps API I included might use these. I found that they don't use it either, after analyzing the markup Google Maps API produces.

How can I prevent wild scrolling when a fixed position text input form field gains focus? -This one is focused on trying to cope with the problem. Setting the body to overflow:hidden; was suggested to block scrolling while being focused, but it did not work for me.

disable scrolling on input focus in javascript -Here it is suggested that returning false on keydown might solve the problem, which I tried with no success. This one block my text from being actually entered in the input.

I know this is related to the bug in Android which causes this weird scrolling. But I don't know anymore how to cope with this. For me it does not matter whether I find out how to avoid the bug or whether I find a hack to make the bug unnoticable. I just want to get rid of the weird scrolling behavior while typing and focussing/blurring on textboxes.

Thanks in advance,

Jeroen

Answer 1

Remove the meta viewport tag from your markup and add this immediately after the opening body tag:

<script type="text/javascript">
<!--
    (function() {
        var meta = document.createElement("meta");
        meta.setAttribute('name','viewport');
        var content = 'initial-scale=';
        content += 1 / window.devicePixelRatio;
        content += ',user-scalable=no';
        meta.setAttribute('content', content);
        document.getElementsByTagName('head')[0].appendChild(meta);
    })();
//-->
</script>

This will give you the best experience on mobile (amazing image rendering too!). I noticed on my device (which isn't Android) I had some weird scrolling/zooming issues and this eliminates that. Let me know if it works :)