Почему will-change: непрозрачность обрабатывает фиксированные элементы иначе, чем will-change: превращается в chrome?

Question

Я пытаюсь оптимизировать прокрутку моего веб-приложения. У меня есть таблицы данных с кучей данных, и прокрутка становится довольно плохой. я добавил will-change: transform к таблице данных, но это сломало мои заголовки таблицы, которые position: fixed (Я исправил их, чтобы они могли прокручиваться в окне просмотра). Элементы вообще не перемещаются с окном просмотра, они просто остаются в потоке документа.

Но случайно я обнаружил, что если я использую will-change:opacity вместо этого мои фиксированные заголовки в порядке. Может кто-нибудь объяснить это поведение? Я не смог найти никакой документации, которая говорит, что они должны действовать по-другому.

Вот кодовая ручка с примером того, о чем я говорю. Переключайтесь между значениями и прокручивайте в синем div. https://codepen.io/bkfarns/pen/aLYgrN

Вот основной код из пера тоже:

HTML:

  <div class="container">
    <div class="fixed">should be position: fixed</div>
    <div class="too-tall">div that is too tall</div>
  </div>

CSS:

.container {
    margin-left: 100px;
    background-color: blue;
    width:400px;
    height:300px;
    overflow: auto;
    will-change: transform;//changing this to opacity fixes the issue
}

.fixed {
  background-color: grey;
  position: fixed;
  margin-left: 150px;
  margin-top: 100px;
}

.too-tall {
  background-color: red;
  width: 90px;
  height: 600px;
}

Answer 1

Весь смысл will-change заключается в том, чтобы внести все возможные изменения, которые браузер должен будет применить, когда указанное свойство будет изменено заранее, сокращая время, необходимое для самого изменения. Фактически это означает, что, указав will-change:transform Вы делаете элемент преобразованным (хотя визуально он остается в том же положении), и потомки преобразованных элементов не могут быть исправлены согласно спецификации CSS Transforms. Непрозрачность не имеет такого эффекта, поэтому will-change:opacity не нарушает фиксированное позиционирование.

Также, will-change per se не имеет никакого "волшебства оптимизации", оно только оптимизирует изменения указанных свойств. Некоторые свойства заставляют элементы составных слоев, которые теоретически могут обрабатываться графическим процессором более эффективно, но если таких элементов слишком много, это может привести к обратному эффекту. Для оптимизации прокрутки, возможно, другие стратегии будут более эффективными.