Не отрабатывает анимация на iphone при этом на маке всё ок, почему?

Question

[Hoqus]

Здравствуйте, вот такая простая анимация, работает везде кроме айфона и айпада, не понимаю почему так.

.main-header__button-animation {
  display: block;
  width: 3px;
  height: 10%;
  background-color: $basic-white;
  border-radius: 3px;
  animation-name: mp3;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: background-color 0.3s ease;

@keyframes mp3 {
  0% {
    height: 10%;
  }

  50% {
    height: 50%;
  }

  100% {
    height: 10%;
  }
}

Comments

[imko]

https://caniuse.com/ проверяй может че-то не кушает твой айфон

[Hoqus]

imko, дело в том, что на всех айфонах и айпадах которых тестил, не работало ( и на кен ай юс тоже искал по использованным свойствам, не нашёл ничего...

[imko]

Hoqus, а на других устройствах с таким разрешением работает же?

[Вадим]

Hoqus, почему бы не сделать демку на codepen, чтобы можно было проверить?

[Hoqus]

imko, да, на андроид девайсах тестил тоже - работало всё

[Hoqus]

Вадим, демка готова, цвета только подругому записал, без переменных, а так 1 к 1му сделал.
https://codepen.io/Hocus/pen/yLEGWay

Answer 1

[Вадим]

Чуть поправил, так что теперь можете оттолкнуться от моей демки.
Почему не анимировалось на iphone информации нет. Скорее всего потому что менялась высота внутри flex.
Ну и в целом анимировать высоту, так же как и ширину - считается не самым лучшим делом в вебе.
Погуглите на тему "производительные анимации". Или "свойства, безопасные для анимации".
Плюс элементы на самом деле не помещались в свой контейнер, но это было не заметно на глаз, так как флекс без врапа.