will-change：不透明度は固定要素をwill-changeとは違って扱います：chromeのtransform？

Question

私は自分のWebアプリケーションのスクロールを最適化しようとしています。私は大量のデータを持つデータテーブルを持っており、スクロールはかなり悪くなります。私はwill-change: transformをデータテーブルに追加しましたが、テーブルのヘッダーはposition: fixedでした（ビューポートでスクロールできるように修正しました）。要素はビューポートではまったく動かず、ドキュメントの流れにはまっていません。

しかし、偶然、私がwill-change:opacityを代わりに使用すると、私の固定ヘッダーが正常であることがわかりました。誰かがこの行動を説明できますか？私は彼らが異なった行動を取るべきであると言う文書を見つけることができませんでした。

ここで私が話していることの例を示すコードペンです。値を切り替えると、青いdivにスクロールします。ここで https://codepen.io/bkfarns/pen/aLYgrN

ペンからの基本的なコードは、あまりにもです：

HTML：

<div class="container"> 
    <div class="fixed">should be position: fixed</div> 
    <div class="too-tall">div that is too tall</div> 
    </div> 

はCSS：

.container { 
    margin-left: 100px; 
    background-color: blue; 
    width:400px; 
    height:300px; 
    overflow: auto; 
    will-change: transform;//changing this to opacity fixes the issue 
} 

.fixed { 
    background-color: grey; 
    position: fixed; 
    margin-left: 150px; 
    margin-top: 100px; 
} 

.too-tall { 
    background-color: red; 
    width: 90px; 
    height: 600px; 
} 

Answer 1

will-changeの全体のポイントは、そのすべての可能な変更を行うことがあります指定されたプロパティが事前に変更されるときにブラウザを適用しなければならず、変更自体に必要な時間が短縮されます。効果的には、will-change:transformを指定すると、要素は（視覚的には同じ位置にとどまっていても）変換され、変換された要素の子孫はCSS Transforms specごとに固定することはできません。不透明度はそのような効果を持たないので、will-change:opacityは固定位置を壊さない。

また、will-change自体には「最適化の魔法」はなく、指定されたプロパティの変更のみが最適化されます。いくつかの特性は、理論的にはGPUによってより効率的に処理されることができる複合層に要素を強制するが、そのような要素が多すぎると逆の効果を有することがある。スクロールを最適化するには、おそらくother strategiesが効率的です。