1

我正在使用语义用户界面，并设法缩小了 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要对实际布局做任何事情？

4

1 回答 1

2

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

这不是未定义的行为：

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

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

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

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

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

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

于 2016-09-29T08:25:25.193 回答