Scrolling the screen during input using JQTouch in Android PhoneGap app?

Question

I made an application using jQtouch, jQuery and PhoneGap. When you enter a form field, the entire page scrolls up or down each time you enter a character. I searched everywhere for solutions, but I cannot find them. There was a similar problem here: https://github.com/jquery/jquery-mobile/issues/638 but its solution did not solve my problem.

Does anyone have an idea why the page will scroll up and down with each character added in the text box? Because the page is so small, it quickly scrolls up and down, which makes it very annoying.

Answer 1

Put the following CSS in your file after all the 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 for me).

Answer 2

Try this in an init function called onload:

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

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

Answer 3

I ran into the same issue on Android 2.2. I added the following properties to my CSS and then found that the problem was resolved. What changed; I don't know, but it works for me:

 html, body{overflow: hidden;} 

Try it, it might work for you too.

Answer 4

I am using the new beta version (jqtouch-1.0-b4-rc), and with this I could not get these tricks to work on Android 2.2 or 2.3. In the end, I fixed it by including the following in my CSS base:

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