Cordova 应用程序 - android 5 Lollipop 上的滚动问题

Question

我开发了一个 cordova 应用程序，我正在使用 Android 5.0 Lollipop 在我的 phone 上测试它。我发现 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);
}

我也在使用 ratchet 来获得一些基本的 CSS。

有人遇到同样的问题吗？您认为这是 cordova 还是 Android Lollipop WebView 错误？

有机会解决吗？

谢谢

Answer 1

你试过用Crosswalk编译吗？希望能解决。

Cordova 应用程序 - android 5 Lollipop 上的滚动问题

Cordova app - scrolling issue on android 5 Lollipop

css

cordova

android-5.0-lollipop

ratchet-2