android - 奇怪的重绘？在 android 上的 webview 中发布 html 应用程序

Question

我制作了一个简单的数码时钟 html 应用程序并将其包装在 WebView 中以便在 android 上使用。没有花哨的东西。只有一个 HTML 文件、一个 JS 文件和一个 css 文件(以及十位数的图像)。

几个小时后，屏幕中央出现条纹(动画出现的地方及之后)，屏幕完全无法辨认。菜单也被“损坏”，因为屏幕的一部分已损坏。见下图(这些图片质量差的借口 = 网络摄像头):

这是一个已知错误吗？重新启动应用后，一切又恢复正常。

我使用的设备是三星 Galaxy S3 GT-I9300，运行 Android 4.3 I9300BUUGNF1

为了使数字动画化，我创建了一个脚本，该脚本在容器上设置了一个类，其中包含 10 位数字以显示一个数字。当没有设置类时，所有图像都是完全透明的(不透明度:0)。这是因为我使用了 250 毫秒的缓动过渡来给它一个很好的淡入淡出(到不透明度: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) 作为某种闪屏。因此，当创建 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);
         }

我更改了 Android WebView 的 CSS，没有或更少的透明度，也没有 (CSS) 动画，因为即使使用硬件加速，WebView 也太慢了。所以要小心使用花哨的东西。

WebView 的质量太差了，这真是令人难过，它肯定与 Android 标准浏览器相同，但在某些方面却截然不同。如果您想避免所有这些麻烦，并且能够将您的软件定位为 KITKAT 或更高版本，您可以使用基于 Chrome 的 WebView(另请参见:https://developer.chrome.com/multidevice/webview/overview)。 Chrome WebViews 包括更新版本的 V8 JavaScript 引擎，并支持以前在旧版 WebViews 中缺少的现代网络标准。