Почему элементарная css-анимация так нагружает CPU?

У меня есть очень простой тестовый пример:
<div id="container">
  <div id="target"></div>  
</div>


И очень простая анимация для него:
@keyframes marquee-x {
	from { transform: translate(0, 0); }
	to   { transform: translate(-100%, 0); }
}
#container {
  width: 200px;
  height: 100px;
  margin: 40px;
  background: rgba(255,0,0,0.4);
}
#target {
  background-color: black;
  border-radius: 0px;
  width: 50px;
  height: 50px;
  animation: marquee-x 5s infinite;
}


И вот этот простейший пример грузит CPU на 20% (по сути почти полностью загружает одно ядро):

biz4rztibjvdelavpmquw4w-lzc.png

Стоит отключить анимацию - нагрузка сразу падает:
dlhdm2vaxnv_m6l6gkftrgan3im.png

Почему? Как с этим бороться? Я помню всегда радостные статьи, как translate оптимизирован и вообще никак-никак не должен влиять на производительность.

transform: translateZ(0); и will-change: transform; никак не влияют на результат
  • Вопрос задан
  • 712 просмотров
Решения вопроса 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Видимо на вашей системе браузер не использует аппаратное ускорение на полную.
Обновите драйвера (или наоборот - откатитесь).
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Byteler
40 лет в сети
- Конфликт скриптов? Отключите все дополнения и повторите.
- Попробуйте в другом браузере. Я, снеся firefox, в Яндексе этого не наблюдаю (+4%)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы