Android - Webview, окна ввода удвоены?

Я пытаюсь создать приложение для Android, которое использует веб-просмотр, чтобы пользователи могли вводить свое имя пользователя/пароль, но при нажатии на поля ввода они удваиваются (см. рисунок ниже). Я использую плагин iScroll jQuery, чтобы позволить пользователям прокручивать страницу вверх, когда клавиатура подходит и блокирует область ввода. Вот макет /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>
...

Я замечаю, что независимо от того, какую веб-страницу я просматриваю на платформе Android, она накладывает дополнительное поле ввода на вход, который я только что нажал. Ключ, я думаю, должен был отключить умолчание webview в этом случае? Как вы это делаете или можете даже?

Спасибо

Ответ 1

Скорее всего, это связано с переходами CSS. Похоже, что телефон перестает отслеживать реальную позицию текстового поля. В принципе, это кажется путаным между абсолютным позиционированием и translate3d(), который делает iscroll. Легкий способ исправить это - установить translate3d (0,0,0) в начале вашего div, чтобы убедиться, что он знает, где он находится. Взгляните на мою статью для получения дополнительной информации: http://java-cerise.blogspot.com/2011/10/dodgy-double-input-fields-on-android.html надеюсь, что это поможет.

Ответ 2

добавить следующее к вам:

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