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:

If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.

If any non-initial value of a property would cause the element to generate a containing block for absolutely positioned elements, specifying that property in will-change must cause the element to generate a containing block for absolutely positioned elements.

If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in will-change must cause the element to generate a containing block for fixed positioned elements.

If any non-initial value of a property would cause rendering differences on the element (such as using a different anti-aliasing strategy for text), the user agent should use that alternate rendering when the property is specified in will-change, to avoid sudden rendering differences when the property is eventually changed.

For example, setting opacity to any value other than 1 creates a stacking context on the element. Thus, setting will-change: opacity also creates a stacking context, even if opacity is currently still equal to 1.

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