Screen Scrolls while typing Using JQTouch in an Android PhoneGap app?

Question

I have made an app using JQtouch, Jquery, and PhoneGap. When you type in a form's field, the entire page scrolls up or down each time you enter a character. I have searched everywhere for solutions but cannot find one. There was a similar problem here: https://github.com/jquery/jquery-mobile/issues/638 but his solution did not solve my issue.

Does anyone have an idea why the page would scroll up and down with each added character in a textbox? Because the page is so small, it scrolls up and down quickly making it very annoying.

Answer 1

Try this in an init function called onload :

function preventBehavior(e) { e.preventDefault(); }; document.addEventListener("touchmove", preventBehavior, false);

More discussion at http://groups.google.com/group/phonegap/browse_thread/thread/739525b7531b6d29/

Answer 2

Put the following CSS in your file after all other CSS styles:

    body {
        -webkit-perspective: none;
        -webkit-transform-style: flat;
    }
    body > * {
        -webkit-backface-visibility: visible;
        -webkit-transform: none;
    }

This should solve your problem (at least it did for me).

Answer 3

I faced the same issue on Android 2.2. I put the following properties in my CSS and then found that the issue had been resolved. What thing made the difference; I don't know, but it is working for me:

html, body{overflow: hidden;}

Try this, it may work for you also.

Answer 4

I'm using the new beta version (jqtouch-1.0-b4-rc), and with that I couldn't get these tricks to work on either Android 2.2 or 2.3. In the end I fixed it by including in the following at the base of my CSS:

#jqt ul li {
    -webkit-transform: none;
    position: relative; /* required to fix arrows */
}
#jqt ul li a {
    -webkit-transform: none;
}