スタティックポジショニングはパフォーマンスを大幅に低下させます（？）

Question

私は突然奇妙なレンダリングパフォーマンスの問題に遭遇したときにアイデアをスケッチしていました。 私はこのアイデアを説明するためにCodePenを作成しました。ナビゲーションエレメントはフッタと「衝突」するときにposition: fixedからposition: staticに変わります。それで、それはフッタがそれを押し上げるように見えます。

ポジションモードが変更されたときにパフォーマンスが低下するJS（私はJSなしで試しました）のバグはありません。それは私が多くを作るCSSプロパティを見つけたものです。 スクロールするときにブラウザがより重く表示されます。

IE10/Firefoxではうまく動作しているようですが、Chromeではwebinspectorsのfps-meterでレンダリングするのがずっと重いことがわかります。

しかし、私が見つけたすべてのうちで最も奇妙ですが、 Safariでは、それはのレンダーが遅いです。 BUTposition: fixedで余分な要素を追加することで、Safariはそのすべてを最大限に活用します。余分な固定要素なしhttp://codepen.io/slebbo/pen/GpPRQX

：追加の固定要素と（Safariのバージョン9.0.1（11601.2.7.2））

http://codepen.io/slebbo/pen/avPZxy

私のGoogleのスキルは、このいずれかで何の助け、誰もなかったですこの行動の答えがあります。特にSafariでは、本当にファンキーです。

Answer 1

これらの問題を引き起こすハードウェアアクセラレータ要素である必要があります。特に、スクロール時に固定要素を再描画する必要があります。カバーするように設定された背景画像などがある場合も同じです。

あなたが使用してこれを行うことができます。 backface-visibility: hidden;

かさえを： will-change: transform;