position:fixedが効いている要素は、スクロールするたびに固定要素のビットマップと、重なりの下にあるほかの要素のビットマップをCPU上で合成する必要があり、広範囲の再描画を必要とする。

そのため、GPUアクセラレーションを有効にする下記のCSSハックを行うと描画スピードが向上する。

transform: translate3d(0, 0, 0);

※上記ハックはあらゆる要素に適用できるが、CPUからGPUへの要素の転送はブラウザにとって負荷の高い処理であるため、広い領域を持つ要素や多数の要素にむやみに利用すべきではない

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA