Почему не корректно работает анимация в safari?

Question

[Роман]

Все приветствую. Вот css код
.mod-btn {
font-size: 16px;
padding: 10px 30px;
border-radius: 25px;
background-color: var(--blue);
color: #fff;
text-decoration: none;
border: 2px solid #2634ff;
}
.mod-btn:after {
position: absolute;
content: "";
background-color: #5864FF;
z-index: -1;
width: 250px;
height: 50px;
top: 50%;
left: 50%;
border-radius: 40px;
animation: glowing 1.4s infinite;
-webkit-animation: glowing 1.4s infinite;
transform: translate(-50%, -50%);
will-change: width, height, opacity, transform;
}
@keyframes glowing {
0% {
width: 250px;
height: 50px;
opacity: 1;
}
100% {
width: 300px;
height: 60px;
opacity: 0;
}
}
На iOS анимация кнопки дергается, элемент mod-btn:after сначала увеличивается в размере, а потом только срабатывает свойство opacity. За ранее всем спасибо за ответы.

Answer 1

[DIVSIDE]

Вы считаете, что это свойство transform: translate(-50%, -50%); является причиной?

Я считаю что нагромождение ненужной фигни является причиной.

Comments

[Роман]

Анимация немного не та, но клиент доволен. Спасибо, отмечу решением.

[DIVSIDE]

Роман, можно убрать поменять на свойство

@keyframes growing {
  0% {
    transform: scale(1, 1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5, 1);
    opacity: 0;
  }
}