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

Question

我正在尝试优化我的网络应用程序的滚动。我有包含大量数据的数据表，滚动变得非常糟糕。我添加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 规范进行修复。Opacity 没有这样的效果，所以will-change:opacity不会破坏固定的定位。

此外，will-change本身没有任何“优化魔法”，它只优化指定属性的变化。某些属性迫使元素进入复合层，理论上可以由 GPU 更有效地处理这些元素，但如果此类元素过多，则可能会产生相反的效果。为了优化滚动，可能其他策略会更有效。