Javascript 为什么will change:opacity对固定元素的处理与chrome中的will change:transform不同？

我正在尝试优化我的web应用程序的滚动。我有大量数据的数据表，滚动变得非常糟糕。我在数据表中添加了

will change:transform

，但它破坏了我的表头，这些表头是

位置：固定的（我将其固定以允许它们随视口滚动）。元素根本不随视口移动，它们只是停留在文档流中

但我偶然发现，如果我使用
将改变：不透明度
，我的固定标题就可以了。有人能解释这种行为吗？我还没有找到任何文件表明他们应该采取不同的行动

这是一支代码笔，上面有一个我所说的例子。在值之间切换，并以蓝色div滚动。

以下是钢笔的基本代码：

html:

will change
的全部意义在于，当指定的属性提前更改时，浏览器必须应用所有可能的更改，从而减少更改本身所需的时间。实际上，这意味着通过指定
will change:transform
可以使元素进行变换（尽管在视觉上它保持在相同的位置），并且变换后的元素的后代不能按顺序固定。不透明度没有这种效果，因此
将改变：不透明度不破坏固定位置

另外，
本身将改变
没有任何“优化魔法”，它只优化指定属性的改变。某些属性将元素强制添加到复合层，理论上GPU可以更有效地处理这些复合层，但如果此类元素太多，则可能产生相反的效果。对于优化滚动，可能会更有效。
现在没有足够的时间来挖掘规范，但可能是因为
将改变：transform
意味着
transform
不会停留在
none
，因此浏览器将直接从元素创建堆叠上下文，就像您设置了
transform:translate（0,0）。看见不是真正的规格，但最后一个子弹的警告你这个确切的效果。
  <div class="container">
    <div class="fixed">should be position: fixed</div>
    <div class="too-tall">div that is too tall</div>
  </div>

.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;
}