Android WebViewハードウェアアクセラレーションアーティファクトの回避策

2013-06-12 android css webview hardware-acceleration

AndroidのWebViewハードウェアアクセラレーションには既知のバグがあります。 例はこちらをご覧くださいhttps : //code.google.com/p/android/issues/detail?id=17352

ハードウェアアクセラレーションを無効にすることは、私にとって選択肢ではありません。

私はこれらの素晴らしい参考文献を読みました:

私の質問は、HWA(ハードウェアアクセラレーション)がオンになっている場合、発生する可能性のあるレンダリングアーティファクトを防ぐためのCSS / HTMLの回避策を誰かが知っているということです。

フォームフィールドにフォーカスを当てたときにのみ表示され、vsync-esqueとサブピクセルのグリッチが発生するようです。フィールドに焦点を合わせると、ページ全体が揺れるようです。

それはposition: absoluteようですposition: absoluteもこれと関係があります。

誰かがこれを解決する経験を得ましたか?

Answers

追加:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
backface-visibility: hidden;
perspective: 1000;

3Dトランスフォームを使用している場合..それは安価なトリックですが、iPadのパフォーマンスが大幅に向上します。

さらに、あなたは試すことができます

-webkit-transform: rotateZ(0deg);

AFAIKの回転は、gpuが回転に優れているため、パフォーマンスを向上させることができます。

別の方法は、画面上の各要素に「関数なし」の変換を配置することです。

私があなたを助けることができるかどうか私に知らせてください。

HWAを有効にすると、レンダリングで同様の問題が発生しました。次の行を本文に(cssで)適用すると、レンダリングの問題が解消されました。

body {
  -webkit-transform: translateZ(0);
}

このコードをクラスに配置します。

webview.getSettings().setRenderPriority(RenderPriority.HIGH); 

if (Build.VERSION.SDK_INT >= 19) {
    webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
}       
else {
    webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Related