Разве CSS-анимация не работает на iOS Chrome? ⇐ IOS

[Anonymous]

Я создаю анимацию, показывающую меню с последовательными задержками. ниже мой код (twin.macro + эмоция).

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

const Menu = ({ onClose }: Props) => {
return (








/* menu */
[list]

About


Project


Story


Group

[/list]



);
};

export default Menu;

const showMenu = keyframes`
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
`;

const Item = styled.li`
${tw`-translate-x-full text-4xl font-bold text-white transition will-change-transform hover:text-gray-200`};
&:nth-of-type(1) {
animation: ${showMenu} 0.3s ease-in-out forwards;
-webkit-animation: ${showMenu} 0.3s ease-in-out forwards;
}
&:nth-of-type(2) {
animation: ${showMenu} 0.3s ease-in-out 0.1s forwards;
-webkit-animation: ${showMenu} 0.3s ease-in-out 0.1s forwards;
}
&:nth-of-type(3) {
animation: ${showMenu} 0.3s ease-in-out 0.2s forwards;
-webkit-animation: ${showMenu} 0.3s ease-in-out 0.2s forwards;
}
&:nth-of-type(4) {
animation: ${showMenu} 0.3s ease-in-out 0.3s forwards;
-webkit-animation: ${showMenu} 0.3s ease-in-out 0.3s forwards;
}
`;

он ​​хорошо работает в настольных браузерах и iOS Safari, но анимация прерывается в iOS Chrome. это ошибка? какое-нибудь решение?
Я хочу, чтобы оно правильно работало на iOS Chrome.

Подробнее здесь: https://stackoverflow.com/questions/754 ... ios-chrome