CSS里”will-change”属性的黑暗面

长话短说:不要使用 will-change 属性,除非你真的知道你在做什么。

will-change属性有什么作用?

[will-change]属性的作用是开发人员可以提前告诉UA,一个元素可能会发生什么样的变化。这样可以让UA有机会提前优化如何处理这个元素,提前做一些可能比较耗资源的动画的准备工作,在动画真正开始前完成准备。
https://dev.w3.org/csswg/css-will-change/

不幸的是,will-change不仅仅只是“通知UA”,还做了很多其它事情,其中包括变更了元素的层叠顺序(类似z-index).

我们需要担心什么?

使用 will-change 会让我们又回到了旧时的使用IE编程的时代。在那时,我开发网页是需要先写出代码,然后看看它们在IE里是什么样子,然后开始打补丁。使用will-change属性会产生同样的结果。任何时候使用这个属性,你都需要检查will-change在浏览器里的作用效果是否如你所愿。

一个使用will-change的例子

这个例子展示了两个方块在同一位置(x/y)时反生的状况

HTML代码

<div class="box box1"></div>
<div class="box box2"></div>

CSS代码:

.box {
    height:100px;
    width:100px;
} 
.box1 {
    background:orange;
    will-change:transform;
} 
.box2 {
    background:teal;
    margin-top:-100px;
}

输出效果:

支持 will-change 属性的浏览器显示黄色方块在上面,而不支持这个属性的浏览器显示绿色方块在上面。

这种现象跟元素层叠顺序(类似z-index)混乱有关,但是因为要使用 will-change 属性,就必须要接受这种混乱的现实。

为什么要重视这个问题

我发现IE浏览器适时的停止了脚步;因为这个属性像是一个历史倒退——它让我想起了DX filters,一个臭名昭著的专门为IE准备的fix。而很多开发人员又不知道这个过滤器的副作用,不知道很多的过滤器都改变了浏览器的一些正常渲染过程。

总之,用与不用will-change,你自己选择。

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号