为什么 will-change:opacity 对固定元素的处理方式不同于 will-change:transform 在 chrome 中的处理方式?
Why does will-change:opacity treat fixed elements differently than will-change:transform in chrome?
我正在尝试优化我的网络应用程序的滚动。我的数据 tables 包含大量数据,滚动变得非常糟糕。我将 will-change: transform
添加到数据 table 但它破坏了我的 table headers 即 position: fixed
(我将它们固定为允许它们随视口滚动) .元素根本不随视口移动,它们只是停留在文档流中。
但是偶然发现,如果我改用will-change:opacity
,我固定的headers就可以了。有人可以解释这种行为吗?我找不到任何说明他们应该采取不同行动的文件。
这是一个代码笔,其中包含我正在谈论的示例。在值之间切换,并以蓝色滚动 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;
}
will-change
的全部意义在于,当指定的 属性 提前更改时,浏览器必须应用所有可能的更改,从而减少更改本身所需的时间。实际上,这意味着通过指定 will-change:transform
可以使元素发生转换(尽管在视觉上它保持在同一位置),并且转换后的元素的后代不能根据 CSS Transforms spec 进行固定。不透明度没有这样的效果,所以 will-change:opacity
不会破坏固定定位。
另外,will-change
本身没有任何"optimization magic",它只是优化指定属性的变化。一些属性强制将元素添加到理论上可以由 GPU 更有效地处理的复合层,但如果此类元素太多,则可能会产生相反的效果。为了优化滚动,可能 other strategies 会更有效率。
我正在尝试优化我的网络应用程序的滚动。我的数据 tables 包含大量数据,滚动变得非常糟糕。我将 will-change: transform
添加到数据 table 但它破坏了我的 table headers 即 position: fixed
(我将它们固定为允许它们随视口滚动) .元素根本不随视口移动,它们只是停留在文档流中。
但是偶然发现,如果我改用will-change:opacity
,我固定的headers就可以了。有人可以解释这种行为吗?我找不到任何说明他们应该采取不同行动的文件。
这是一个代码笔,其中包含我正在谈论的示例。在值之间切换,并以蓝色滚动 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;
}
will-change
的全部意义在于,当指定的 属性 提前更改时,浏览器必须应用所有可能的更改,从而减少更改本身所需的时间。实际上,这意味着通过指定 will-change:transform
可以使元素发生转换(尽管在视觉上它保持在同一位置),并且转换后的元素的后代不能根据 CSS Transforms spec 进行固定。不透明度没有这样的效果,所以 will-change:opacity
不会破坏固定定位。
另外,will-change
本身没有任何"optimization magic",它只是优化指定属性的变化。一些属性强制将元素添加到理论上可以由 GPU 更有效地处理的复合层,但如果此类元素太多,则可能会产生相反的效果。为了优化滚动,可能 other strategies 会更有效率。