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.

Flapper

if it's a JQtouch, Jquery, and PhoneGap then you don't use jquery mobile framework I guess. Removing the tag. – Arita

As for the solution - looks like an error with events handling. Try adding some visual outputs to event handlers (like writing text to body) to see what is being called. Also - make sure you use latest versions of stuff. If you do - try with jquery 1.4.3 and 1.4.4 (but that shouldn't be the issue) – Arita

Answer 1

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

Costive

Wow, this is beyond me. Yesterday this bit of CSS saved my life and now it suddenly doesn't work anymore. Too bizarre – Revivalist

Great, this fixed it for me under iOS. – Ruyle

Answer 2

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/

Deaminate

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.

Battled

This will prevent the user from scrolling at all. – Lento

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

Headcheese