Почему фильтр фона требует больших затрат для элементов, содержащих анимацию? ⇐ CSS

[Anonymous]

Когда элемент имеет фоновый фильтр и внутри него есть что-то анимированное, я наблюдаю огромную нагрузку на процессор и графический процессор в Chrome. Для меня это не имеет смысла, поскольку фоновый фильтр необходимо пересчитывать только тогда, когда что-то за ним меняется.
Возьмем этот пример. :

Код: Выделить всё

@keyframes pulse {
0%,
100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}

Код: Выделить всё

На этой странице есть:

• Внешний элемент div с полосатым фоном.
• Внутри него элемент div с фоновым фильтром: размытие. На нем показаны размытые тонкие полоски.
• А внутри этого — зеленый элемент div с анимированной непрозрачностью.

Вот что я ожидаю при рендеринге этого. Мы получим три слоя композиции:

• Слой 1: внешний элемент div с полосатым фоном.
• Слой 2: элемент div с фоновым фильтром.
• Слой 3: элемент div с анимированной непрозрачностью.

Анимация непрозрачности должна быть дешевым: он должен вызывать этап композиции один раз для каждого кадра. Не должно быть никаких макетов, перекомпоновки или рисования.
Я не ожидаю, что фоновый фильтр окажет какое-либо влияние на производительность. Размытый фон следует пересчитывать только тогда, когда слои под ним изменяются, чего не происходит, поскольку под ним находится всего лишь статический фон. Процесс GPU должен загружать около 5% CPU и 1% GPU (количество, используемое при отсутствии фонового фильтра).
И действительно, это все, что предлагает Chrome. инструменты разработки претензии. Инструмент «Слои» показывает эти три слоя, а 10-секундный профиль производительности показывает 0 мс при рендеринге, 0 мс при рисовании и утверждает, что графический процессор практически простаивает.
И тем не менее, macOS Activity Monitor показывает многое больше активности в процессе графического процессора. Процесс графического процессора Chrome использует 20 % ЦП и 17 % ГП на моем MacBook M2.
Что он делает? Пересчитывается ли фоновый фильтр? Почему? И как мне найти ответы с помощью инструментов разработки Chrome?

Подробнее здесь: https://stackoverflow.com/questions/792 ... -animation