低DPIディスプレイと高DPIディスプレイでChromeのスクロール表示が異なるように

Question

ウェブアプリケーションのスクロールのパフォーマンスを最適化するために、最新のChrome（v31）（Chrome Canary v34）。この簡単な例で

、私はシンプルなスクロール可能なdiv要素があります。

<style> 
    .container { 
     width: 200px; 
     height: 200px; 
     overflow: auto; 
     background: #ccc; 
    } 
    .container div { 
     height: 80px; 
     width: 80px; 
     background: #555; 
     border-radius: 10px; 
    } 
</style> 
<div class="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

を私はPERFをスクロール調査するために、次のクロームのdevの設定を有効に：

• 「ショー塗料の長方形」（赤で表示矩形のアウトライン）
• "潜在的なスクロールボトルネックを表示"

私は非網膜ディスプレイ上のWebページをロードすると、それはすべてのスクロールで全体のコンテナのdivを塗り替える、とChromeがさえなどを示しています。

をしかし、私は私の網膜ディスプレイにウィンドウを移動し、ページをリフレッシュし、スクロールしてperfを向上させます。

高DPIの動作が望ましいと思われる、とスクロールが高速です：それだけで（時にはスクロールビューポートでは、以前にはなかったコンテンツをして）スクロールバー自体を再描画します。 DPIに関係なくChromeでこのパフォーマンスを達成する方法はありますか？

Answer 1

これをテストするための網膜ディスプレイコンピュータはありません。私の推測では.containerで "translateZ hack"を試すことができますか？

.container { -webkit-transform: translateZ(0); } 

動作するかどうかわかりません。しかし、特定の状況では、それはそれ自身の "レイヤー"にその要素を分離することによって、ブラウザの再描画を改善するのに役立ちます。

希望すると便利です。

Answer 2

私はこのことについて、郵便配達員チームのブログ記事で説明しました。彼らは上記の同じソリューションを使用しますが、その理由を説明します。下のスニペットを試してみてください。

webkit-transform: translate3d(0,0,0); 

http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/