Почему CSS анимация тормозит на телефоне?

Question

[Teleweb developer]

Всем привет, разрабатываю мини-приложение для мобилы на html, css, js. Столкнулся со странной проблеммой:
CSS анимация в браузере плавно идёт, а на телефоне - рывками(тормозит)
вот код CSS:

.footer {
  position: fixed;
  bottom: 0px;
  font-size: 20px;
  width: 100%;
  filter: drop-shadow(2px 4px 6px blue);
  height: 30px;
  transition: height .3s linear;
  contain: content;
}
.footer.open {
  height: 40%;
}

Вроде бы ничего сложного, но почему проблемма на телефоне с анимацией?

Comments

[Вадим]

а при изменении высоты другие блоки, соседние, смещаются? Если да, то это не хорошо для производительности.

[Teleweb developer]

Вадим, нет

[John Norton]

Почитайте данную статью: https://habr.com/ru/company/rambler_and_co/blog/258913/

Мб поможет тебе

[John Norton]

Will change попробуйте вести в свой код

https://developer.mozilla.org/ru/docs/Web/CSS/will...

Answer 1

[Teleweb developer]

Вообщем не нашёл решения но протестировал на другом телефоне, там всё работает круто, видимо это мой телефон тормозит

Answer 2

[Александр]

Попробуйте filter: drop-shadow(2px 4px 6px blue); заменить на box-shadow: 2px 4px 6px blue;. И можете добавить will-change: height;.

Comments

[Teleweb developer]

К сожалению не помогло