css 属性将改变未定义的行为

Question

我正在使用语义 UI，并设法缩小了 css 属性 will-change 中的一些未定义行为（我在他们的模态中找到了它）：

.outer{
  background-color: black;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.inner{
  position:absolute;
  background-color: white;
  left: 50%;
  top: 100px;
  width: 400px;
  margin-left: -200px;
  height: 100px;
  padding: 5px;
  /**
   * comment out the line below
   * to see the desired/different result
   **/
  will-change: transform;
}
.baby{
  color: yellow;
  position: fixed;
  left: 20px;
  top: 20px;
  right: 0;
  border: 1px solid red;
}

<div class="outer">
  <div class="inner">
    <div class="baby">here</div>
    <div class="content">some content</div>
  </div>
</div>

我只在 chrome 中测试过这个。有没有人有更多关于这里发生的事情的信息？为什么will-change 会对实际布局做任何事情？

Answer 1

will-change 会影响布局，因为它通常与属性值可以在不影响布局和影响布局之间变化的属性一起使用。设置will-change 告诉浏览器为这种潜在的变化做准备，这会导致浏览器提前应用布局变化。

这个isn't undefined behavior：

如果属性的任何非初始值会在元素上创建堆叠上下文，则在 will-change 中指定该属性必须在元素上创建堆叠上下文。

如果属性的任何非初始值会导致元素为绝对定位元素生成包含块，则在 will-change 中指定该属性必须导致元素为绝对定位元素生成包含块。

如果属性的任何非初始值会导致元素为固定定位元素生成包含块，则在 will-change 中指定该属性必须导致元素为固定定位元素生成包含块。

如果某个属性的任何非初始值会导致元素呈现差异（例如对文本使用不同的抗锯齿策略），则当在 will-change 中指定该属性时，用户代理应使用该替代呈现, 以避免在最终更改属性时出现突然的渲染差异。

例如，将 opacity 设置为 1 以外的任何值都会在元素上创建一个堆叠上下文。因此，设置 will-change: opacity 也会创建一个堆叠上下文，即使 opacity 当前仍等于 1。

在您的情况下，由于转换导致the creation of both a stacking context and a containing block，因此设置will-change: transform 也将导致创建堆叠上下文和包含块，因为您向浏览器建议该元素可能具有转换现在或以后，当它这样做时，布局将受到影响。