奇怪的重画?在android上的webview中发布html应用程序

奇怪的重画?在android上的webview中发布html应用程序,android,html,css,webview,drawable,Android,Html,Css,Webview,Drawable,我制作了一个简单的数字时钟html应用程序,并将其包装在一个网络视图中,以便在android上使用。没有花哨的东西。只有一个HTML文件、一个JS文件和一个css文件(以及十位数的图像) 几个小时后,屏幕中央(动画所在的位置)出现条纹,屏幕完全无法读取。此外,菜单“损坏”,因为屏幕的一部分已损坏。见下图(这些图片质量差的借口=网络摄像头): 这是已知的bug吗?重新启动应用程序后,一切又恢复正常 我使用的设备是运行在安卓4.3 I9300BUUGNF1上的三星Galaxy S3 GT-I930

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

几个小时后,屏幕中央(动画所在的位置)出现条纹,屏幕完全无法读取。此外,菜单“损坏”,因为屏幕的一部分已损坏。见下图(这些图片质量差的借口=网络摄像头):

这是已知的bug吗?重新启动应用程序后,一切又恢复正常

我使用的设备是运行在安卓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; } 

有什么想法吗

安卓肯定没有漏洞,尤其是较旧版本的OS/SDK。问题是多方面的。首先,我动态创建WebView并设置一些设置。我还使用位图(ImageView)作为某种飞溅屏幕。因此,当创建WebView时,它会覆盖ImageView。这会降低WebView的响应速度(因为ImageView仍然可见),并导致另一个问题,如软键盘无法弹出

由于WebView和stutter动画响应缓慢,我决定使用
WebView.setLayerType
应用一些硬件或软件加速

软件版本
setLayerType(View.LAYER\u TYPE\u software,null)
并非没有bug。它无法处理透明度而没有奇怪的副作用(小故障)就像具有透明度的图像、具有透明度的背景或透明度上的透明度。它还存在可以滚动的绝对位置元素的问题(显示在错误的位置)。当我打开软件加速并隐藏启动位图时,一切都恢复正常

决定应用软件/硬件加速的代码中也存在错误,因此我将其更改为:

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(另请参见:)。Chrome网络视图包括V8 JavaScript引擎的更新版本,并支持以前在旧网络视图中缺失的现代网络标准

你会拉小提琴吗?看到我的答案了吗