PhoneGap - Клавиатура делает экран черным и мерцающим в течение некоторого времени на Samsung Galaxy Tab 10.1

Я разрабатываю мобильные приложения, используя HTML5 и CSS3, используя PhoneGap. Моя проблема заключается в том, что всякий раз, когда я касаюсь текстового поля на моей веб-странице, работающей на Samsung Galaxy Tab 10.1 (Android v3.1), он показывает клавиатуру, но страница становится черной на долю секунды. Время от времени он мерцает, показывая черный фон, а затем восстанавливается.

Я даже пробовал с простой страницей с одним input type="text", и это даже случается с тем же.

Кто-нибудь сталкивался с подобной проблемой и исправился?

Любая помощь очень ценится.

Спасибо.

ОБНОВЛЕНИЕ 1:

Как я уже говорил, черное мерцание даже происходит с приложением, содержащим простую страницу с одним текстовым полем. Ниже приведен код:

<!DOCTYPE html>
<html>
    <head>
        <title> Flickering Problem </title>
        <style>
            html, body{
                -webkit-backface-visibility: hidden;
                overflow: hidden;
                -webkit-transform: translate3d(0,0,0); 
            }
        </style>
    </head>
    <body>
        <input type="text" width="200px" height="100px" />
    </body>
</html>

Я тестировал это на своем Android-планшете, и мерцание было таким же, как с полноценной веб-страницей. Я попытался добавить некоторые атрибуты CSS, предложенные здесь на SO для аналогичной проблемы, которая, как утверждается, решила, но действительно помогла.

Стоит отметить, что черное мерцание происходит всякий раз, когда мы пытаемся ввести какой-либо текст в текстовое поле, и в настоящее время я не делаю никаких анимаций/переходов с помощью CSS3.

Ответы

Ответ 1

Решение состоит в том, чтобы включить аппаратное ускорение в манифесте android.

<application android:hardwareAccelerated="true" ... />

Это позволяет выполнять двойную буферизацию через графический процессор и устраняет проблему. Обратите внимание, что этот параметр доступен только в Android 3.0 +.

Вот фон для всех вас техников::) Недавно мы тестировали функциональное приложение jQuery Mobile HTML5, завернутое телефонами PhoneGap Android 2.x, на вкладку Galaxy 10.1. Мы видели что-то очень похожее, за исключением того, что мы определили заставку для нашего приложения. Мы видим, что когда поле ввода задано фокус, экран мгновенно замигает экран заставки. Очень надоедливый! Чтобы проверить, является ли это той же проблемой, определите заставку для вашего приложения PhoneGap и посмотрите, будет ли экран закрасить ваше изображение вместо черного фона. Зная что-то о том, что происходит с PhoneGap и Android WebView, это моя лучшая оценка того, что происходит: PhoneGap загружает основное приложение с черным фоном и отображает заставку (если она определена) в этом начальном окне. Затем PhoneGap запускает WebView и открывает его поверх главного окна. Когда поле выбрано, Android аннулирует время выполнения компонента, когда оно обновляет его на основе события фокуса или нажатия клавиши, или что-то еще, и Android перерисовывает все. Таким образом, он перерисовывает главное окно позади WebView и затем перерисовывает WebView с содержимым страницы HTML поверх него. Поскольку устройство не имеет должным образом двойного буферизации, вы видите все это перерисовку во всей своей уродливой славе прямо перед вашими глазами.

Мы видели серьезные сбои с веб-формами Android на некоторых телефонах Android 2.x, которые мы тестировали, и это похоже на еще один сбой, но на этот раз на Galaxy Tab работает Honeycomb (3.0).

Мы попытались использовать CSS -webkit-backface-visibility для решения проблем на некоторых телефонах, когда в прошлом наблюдали мерцание, но это вызвало серьезные проблемы с обработкой в ​​формах HTML. Имейте в виду! Теоретически это должно быть жизнеспособным решением для введения некоторой двойной буферизации в микс, но в нашем опыте это вызывает больше проблем, чем решает.

Ответ 2

Это либо проблема с ОС Android, либо Phonegap.

Если это проблема с Android, это может быть исправлено только с обновлением программного обеспечения в ОС. Вы можете проверить это, перейдя на обычный веб-сайт с текстовым полем и нажав на него, чтобы ввести текст. Если он мерцает, это, вероятно, ОС.

Если это проблема с Phonegap, это может быть исправлено путем выполнения определенного поиска для этого. Глядя на лучшие результаты в google, я нашел это:

http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html

Это означает, что вы помещаете -webkit-backface-visibility: hidden; в свой код. Хотя я вижу, что вы поместили его в тег html, body, попробуйте поместить его в тег *, например:

*{
-webkit-backface-visibility: hidden;
}

Примечание. Ссылка помещает стиль в тег .x-panel, я не уверен, что это касается их кода или Android.

Вот еще одна ссылка, на которую вы должны обратить внимание: http://code.google.com/p/jqtouch/issues/detail?id=301

Ответ 3

Я добавил демонстрационную страницу:

http://jsbin.com/upixel/

Из вашего кода input большой (ширина и высота должны быть заданы css). Если это так, черный цвет может исходить из цвета по умолчанию и мерцание может происходить от блокировки (ошибка телефонной или script)

см. будет ли это решить ваши мерцания:

      * {
        -webkit-tap-highlight-color: rgba(0,0,0,0); 
      }

Live Demo

Надеюсь, что это поможет

Ответ 4

У меня была такая же проблема, и вначале я думал, что это связано с манифестной частью приложения.

После нескольких часов беспокойства это то, что сработало для меня. (Все еще не было проблемы после часа тестирования по телефону. Samsung Galaxy S2, версия 4.0.3. И для приложения я использую verison 2.1).

html {background: url (img/brownBG.PNG) repeat 0 0;}

Я просто поместил фон в html, и теперь он отлично работает. Если вы попробуете это решение, прокомментируйте, если оно работает для вас или нет.

EDIT: У меня также есть правило css, которое важно для него * {- webkit-backface-visibility: hidden;}

Ответ 5

Если кто-то все еще ищет решение, я нашел билет поддержки для этой ошибки: http://bugs.dojotoolkit.org/ticket/15365

На сегодняшний день лучшим решением является использование опции adjustPan Android плюс вышеупомянутый подкласс ScrollableView? (если вы можете позволить себе создать APK, выделенный для Android >= 3, вы также можете добавить опцию hardwareAccelerated). Это решает все проблемы, кроме дублирования поля на Android 4. Конечно, если ScrollableView? на самом деле не обязательно в представлении, содержащем текстовые поля, заменяя его просмотром еще лучше.

Ответ 6

В сочетании с уже упомянутыми решениями (т.е. -webkit-backface-visibility: hidden; android: hardwareAccelerated = "true" ), я также пробовал либо одно из следующих:

(применимо только для версии Android >= 3)

  • AndroidManifest.xml

    Android: windowSoftInputMode = "adjustPan"

  • MyActivity.java

    this.runOnUiThread(new Runnable() {
    
        public void run() {
    
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
    
        }
    
    });
    

Ответ 7

    У меня была та же проблема на Samsung Galaxy Tab 10.1, как и у вас. Пока я обновил версию для Android от 3,1 до 4,0,3 (используя Cyanogenmod 9.0 nightly build 20120302) и без изменения кода, проблема была решена на моем устройстве.

    Поэтому я предполагаю, что это проблема компонента webview в версии Android для Android Galaxy Tab.

Ответ 8

У меня есть проверенное решение этой проблемы, у меня тоже была такая же проблема, но я решил ее сам. Сначала создайте поле внутри тела и сделайте его скрытым, или вы можете заставить его спрятаться за div с помощью z-индекса, чтобы он не был виден.

<script>
$(document).ready(function() {
document.getElementById('example').value='';
});
 </script>
   <body>
   <div style='z-index:50;position:absolute;height:100%;width:100%;'>
   Your page matter here</div>
    <select id='example' style='z-index:10'>
    <option value=''>a</option>
    </select></pre>
   </body>

Мото состоит в том, что мы должны установить это поле выбора, когда загрузка страницы, и это остановит мерцание наверняка... попробуйте это ребята..... это сработало для меня

Ответ 9

Я не могу сказать, что это исправит вашу проблему, но это стоит того. Проверьте файл AndroidManifest.xml на android:configChanges="orientation|keyboardHidden" в теге activity (в приложении).