Question

我正在使用semantic-ui，并设法缩小了css属性<form id="form_id" action="" method="POST"> <select id="select_id" name="chosenProduct" onkeypress="document.getElementById('form_id').submit()"> <option value="product_a">Product A</option> <option value="product_b">Product B</option> </select>中的一些未定义的行为（我在模态中找到了它）：

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;
}

我只用chrome测试过这个。有没有人有关于这里发生了什么的更多信息？为什么<div class="outer"> <div class="inner"> <div class="baby">here</div> <div class="content">some content</div> </div> </div>对实际布局做了什么？

Answer 1

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

这isn't undefined behavior：

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

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

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

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


例如，将不透明度设置为1以外的任何值都会在元素上创建堆叠上下文。因此，设置将改变：不透明度也会创建堆叠上下文，即使不透明度当前仍等于1。

在您的情况下，由于转换结果为the creation of both a stacking context and a containing block，因此设置will-change: transform也会导致创建堆叠上下文和包含块，因为您向浏览器建议

表示该元素可能现在或以后都有变换，当它出现时，布局也会受到影响。

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

1 个答案: