Android--Webview, Input boxes doubled?

Question

I'm trying to create an Android app that uses a webview to allow users to enter their username/password, but on tapping the input boxes they get doubled (see the picture below). I'm using the iScroll jQuery plugin to allow users to scroll the page up when the keyboard comes up and blocks the input area. Here is the layout/css:

CSS:

#scroller{
    position:absolute;
    overflow:hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:0;

}
#scroll_content {
    margin-top: 70px;/*must match the topbar height*/
    padding-bottom:70px;
}

html:

...
<div id="scroller">
  <div id="scroll_content">
    <!-- page content here -->
  </div>
</div>
...

I do notice that no matter what webpage I view on the Android platform, it overlays an extra input box over the input I just tapped. The key, I guess, would be to disable the webview's default in this case? How do you do that, or can you even?

Thanks

Answer 1

This is likely to be linked to CSS transitions. The phone seems to lose track of the real position of the textfield. Basically, it seems to be confused between the absolute positioning and the translate3d() that iscroll is doing. An easy way to fix it is to set translate3d(0,0,0) at start on your div to make sure it knows where it is. Have a look at my article for more details: http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html hope that helps.

Answer 2

add following to you css:

#your-container-div-id{
    -webkit-transform: translate3d(0,0,0);
}