私はコルドバ アプリを開発し、Android 5.0 Lollipop を搭載した携帯電話でテストしています。Android ハードウェア アクセラレーションに問題があることを発見しました。有効にすると、このビデオでわかるように、CSS レンダリングの問題が発生します。
スクロール中に表示される空白を見てください。また、スクロール中にすべてのリスト項目 ( <li>
) がぼやけていることがわかります。また、項目のスクロールを停止すると、正常に表示されます。
以前の Android 4.x バージョンを使用していた限り、そのような問題はありませんでした。HW アクセラレーションを無効にすると問題はなくなりますが、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 を取得しています。
同じ問題を抱えている人はいますか?それはコルドバまたは Android Lollipop WebView のバグだと思いますか?
それを解決する機会はありますか?
ありがとう