Question

我开发了一个cordova应用程序，我正在使用Android 5.0 Lollipop在手机上进行测试。我发现Android硬件加速存在问题，如果启用了CSS渲染问题，您可以在this视频中看到。

查看滚动过程中显示的空白区域，您还可以看到每个列表项（<li>）在滚动期间以及当我停止正常滚动项目时都会模糊。

就我之前使用的Android 4.x版本而言，没有这样的问题。如果我禁用硬件加速，我就没有问题了，但性能很差，因为我在其他地方使用了一些CSS技巧来获得更好的CSS性能。

以下是与视频相关的部分代码：

html :(使用把手）

<div id='view'>
<ul>
    {{#each []}}
        <li> 
                {{@index}}
        </li>
    {{/each}}
</ul>
</div>

的CSS：

ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 15px;
    list-style: none;
    background-color: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
li {
    background-color: grey;

    border-bottom: 1px solid rgb(243, 255, 226);
    height: 80px;
    padding: 0;
    position: relative;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#view {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
     perspective: 1000;
     backface-visibility: hidden;

     -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
}

我也使用棘轮来获得一些基本的CSS。

有同样问题的人吗？你认为这是一个cordova或Android Lollipop WebView漏洞吗？

有机会解决吗？

由于

Answer 1

您是否尝试使用Crosswalk进行编译？希望它能解决它。

Cordova应用程序 - 在Android 5 Lollipop上滚动问题

1 个答案: