Geek asks and answers

Wild Android Input Scroll

I am working on a responsive website that has a different stylesheet for mobile or desktop computers. Everything looks good and works fine until the text inputs interact with the mobile phone. They appear as they should. But once clicking (ehrm .. touched), I found that the browser in Android starts to scroll like crazy, and the same thing happens when typing. However, the text is input, and the soft keyboard / focus on the input is not lost.

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

The problem is that for some time I was looking for some solution and found similar problems that solutions were not developed for me. Some topics - and solutions - I studied:

https://github.com/scottjehl/Device-Bugs/issues/3 - It is suggested that the problem be in positioned elements. Especially absolute value in fixed positioned elements. This is repeated in my design, but after removing it the problem is not resolved.

The Android Browser text box scrolls everywhere, is not used. This one suggests that the problem is related to the css properties -webkit-transform: translate3d (0, 0, 0); and -webkit-backface-visibility: hidden ;. I did not enable them myself, but I thought the Google Maps API that I included could use them. I found that they also do not use it, after analyzing the markup of the Google Maps API.

How can I prevent wild scrolling when a fixed position input form field gets focus? - This question is aimed at trying to cope with this problem. Body overflow setting: hidden; It was suggested to block scrolling during focusing, but for me this did not work.

disable javascript input focus scrolling -It is noted that returning false with keydown can solve the problem that I tried without success. This block blocks my text from actually entering input.

, ​​Android, . , . , , , , . / .

,

+5
1

meta viewport :

<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>

( !). , ( Android) /, . , :)

+2

More articles:


All Articles