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

Doubled Input

Have the same issue, damn. Addig those translate3d CSS properties neither helped me. :( — laszlo-horvath, Nov 30 '12 at 15:01
this one worked for me! http://stackoverflow.com/questions/9423101/disable-android-browsers-input-overlays — Midhun KM, Oct 14 '14 at 06:07

score 5 · Answer 1 · answered Nov 01 '11 at 14:15

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.

score 2 · Answer 2 · answered Dec 25 '11 at 15:37

2

add following to you css:

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

answered Dec 25 '11 at 15:37

Anton

3,166
1
13
12

Android--Webview, Input boxes doubled?

2 Answers2

Linked