2

私はコルドバ アプリを開発し、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 のバグだと思いますか?

それを解決する機会はありますか?

ありがとう

4

1 に答える 1