Странное изменение? issue html app в webview на android

Question

Я сделал простое приложение nixie clock html и обернуло его в WebView для использования на Android. Никаких причудливых вещей. Только один файл HTML, JS-файл и файл css (и десятизначные изображения).

Через пару часов в центре экрана есть полосы (где анимация и за ее пределами), и экран полностью не читается. Также меню «повреждено», потому что часть экрана повреждена. Смотрите рисунок ниже (предлоги плохого качества этих фотографий = вебкамера):

Это известная ошибка? После перезагрузки приложения все снова появляется нормально.

Устройство Я использую это Samsung Galaxy S3 GT-I9300 работает на Android 4.3 I9300BUUGNF1

Для анимации номера я создал сценарий, который устанавливает класс на контейнере с 10 цифр в нем, чтобы показать одну номер. Все изображения полностью прозрачны (непрозрачность: 0), когда класс не задан. Это связано с тем, что я использую переход с легкостью в 250 мс, чтобы придать ему хороший эффект (в opacity: 1).

Есть ли проблема с использованием функций CSS3? Это CSS:

.nixie,.clock  { position:fixed; width:80%; height:80%; text-align:center; margin:0 10%; } 
.clock    { top:36px; } 
.clock .digit  { display:inline-block; min-height:800px; width:12.2%; margin-top:8%; padding:0; font-size:0; overflow:hidden; background:#000 url(../img/nixietube.png) top center no-repeat; background-size:100%; } 
.clock .digit img { opacity:0; position:absolute; width:12%; margin-left:-2.4%; margin-top:0.2%; } 
.clock .digit img.dot { margin-left:1.8%; margin-top:-0.2%; } 

body.seg6 .clock .digit.seg8 { display:none; } 
body.seg6 .clock .digit   { width:16.6%; margin:0; margin-top:8%; } 
body.seg6 .clock .digit img  { width:16%; margin-top:0; margin-left:-3.2%; } 
body.seg6 .clock .digit img.dot { margin-left:1.8%; margin-top:-0.1%; } 


.clock .digit.d0 img.d0, 
.clock .digit.d1 img.d1, 
.clock .digit.d2 img.d2, 
.clock .digit.d3 img.d3, 
.clock .digit.d4 img.d4, 
.clock .digit.d5 img.d5, 
.clock .digit.d6 img.d6, 
.clock .digit.d7 img.d7, 
.clock .digit.d8 img.d8, 
.clock .digit.d9 img.d9, 
.clock .digit.dot img.dot, 
.clock .digit.slash img.slash { opacity:1; -moz-transition: all 250ms ease; } 

Любые идеи?

Answer 1

Android не содержит ошибок, конечно, особенно старых версий ОС/SDK. Проблема заключалась в сочетании вещей. Сначала я создаю WebView динамически и устанавливаю некоторые настройки. Я также использую растровое изображение (ImageView) как своего рода splashscreen. Поэтому, когда WebView создан, он охватывает ImageView. Это замедляет реакцию WebView (потому что ImageView все еще виден), а также вызвала еще одну проблему, например, мягкую клавиатуру.

Из-за медленной реакции WebView и анимации заикания я решил применить некоторое ускорение аппаратного или программного обеспечения, используя WebView.setLayerType.

Версия программного обеспечения setLayerType(View.LAYER_TYPE_SOFTWARE, null) не содержит ошибок. Это не может обрабатывать прозрачность без странных побочных эффектов (сбоев) как изображение с прозрачностью, фон с прозрачностью или прозрачность на прозрачности. У него также есть проблемы с элементами с абсолютным размещением, которые можно прокручивать (появляются в неправильном положении). Когда я обратился к программному ускорению и спрятал растровое изображение всплеска, все вернулось к норме.

Существовал также ошибки в коде, чтобы решить, применять программное обеспечение/аппаратное ускорение, поэтому я изменил его к этому:

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) // HONEYCOMB instead of KITKAT 
    { 
     this.webView.setLayerType(View.LAYER_TYPE_HARDWARE, null); 
    } 
    else { 
      // UPDATE: DO NOTHING, BUGS IN SOFTWARE LAYER 
      // older android version, enable software acceleration 
      //this.webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 
     } 

Я изменил CSS для Android WebView, не менее прозрачность и нет (CSS), потому что WebView слишком медленный для этого, даже когда используется аппаратное ускорение. Поэтому будьте осторожны, используя причудливые вещи.

Очень грустно, что WebView имеет такое плохое качество, он должен быть таким же, как браузер Android, но он в некотором роде очень отличается. Если вы хотите избежать всех этих проблем, и вы можете настроить таргетинг своего программного обеспечения на KITKAT или выше, вы можете использовать WebView на основе Chrome (см. Также: https://developer.chrome.com/multidevice/webview/overview). Chrome WebViews включает обновленную версию движка V8 JavaScript и поддержку современных веб-стандартов, ранее отсутствующих в старых WebView.