Свойство css изменяет неопределенное поведение

Question

Я использую semantic-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 говорит браузеру подготовиться к такому потенциальному изменению, в результате которого браузер применяет изменения макета заранее.

Это не неопределенное поведение:

Если любое не начальное значение свойства создаст контекст стека для элемента, указание этого свойства в will-change должно создать контекст стека для элемента.

Если любое не начальное значение свойства приведет к тому, что элемент сгенерирует содержащий блок для абсолютно позиционированных элементов, указание этого свойства в will-change должно привести к тому, что элемент сгенерирует содержащий блок для абсолютно позиционированных элементов.

Если любое не начальное значение свойства приведет к тому, что элемент сгенерирует содержащий блок для элементов с фиксированным позиционированием, указание этого свойства в will-change должно привести к тому, что элемент сгенерирует содержащий блок для элементов с фиксированным расположением.

Если любое не начальное значение свойства вызовет различия в рендеринге элемента (например, использование другой стратегии сглаживания для текста), пользовательский агент должен использовать этот альтернативный рендеринг, когда свойство указано в will-change, чтобы избежать внезапные различия рендеринга, когда свойство в конечном итоге изменяется.

Например, установка непрозрачности для любого значения, кроме 1, создает стековый контекст для элемента. Таким образом, установка will-change: opacity также создает контекст стека, даже если в настоящее время opacity все еще равен 1.

В вашем случае, поскольку преобразования приводят к созданию как стекового контекста, так и содержащего блока, установка will-change: transform поэтому также приведет к созданию стекового контекста и содержащего блока, потому что вы предлагаете браузеру, что элемент может иметь преобразование либо сейчас, либо позже, и когда это произойдет, это повлияет на макет.