奇怪的重绘？在android

Question

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

几个小时后，屏幕中央会出现条纹（动画在其中以及之外），屏幕完全无法读取。菜单也被“损坏”了。因为屏幕的一部分已损坏。见下图（这些图片质量差的借口=网络摄像头）：

这是一个已知的错误吗？重新启动应用程序后，一切都显示正常。

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

为数字设置动画我创建了一个脚本，该脚本在容器上设置一个类，其中包含10位数字以显示一个数字。没有设置类时，所有图像都是完全透明的（不透明度：0）。这是因为我使用250ms的轻松过渡来为它提供一个漂亮的输入淡入淡出（对于不透明度：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肯定没有bug，特别是旧版本的OS / 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引擎的更新版本，并支持以前在旧版WebView中缺少的现代Web标准。