doesn't css animation not work on ios chrome? - ios

Question

i'm making an animation that show the menu by squentially giving delays. below is my code (twin.macro + emotion).
const Menu = ({ onClose }: Props) => {
return (
<>
<div className="absolute top-0 left-0 w-full h-screen z-menu">
<StaticImage className="w-full h-screen" src="../../static/images/bg-main.png" alt="배경" />
</div>
<div className="absolute top-0 left-0 w-full h-screen bg-menu z-menu">
<button className="absolute top-4 right-4 text-white hover:text-gray-200" onClick={onClose}>
<CloseIcon />
</button>
<Responsive className="py-20">
/* menu */
<ul className="flex flex-col items-start gap-9 overflow-hidden">
<Item>
<Link to="/about">About</Link>
</Item>
<Item>
<Link to="/project">Project</Link>
</Item>
<Item>
<Link to="/story">Story</Link>
</Item>
<Item>
<Link to="/group">Group</Link>
</Item>
</ul>
</Responsive>
</div>
</>
);
};
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;
}
`;
it works well in desktop browsers and ios safari, but animation breaks off in ios chrome. is it a bug? any way solution?
i want it to work properly on ios chrome.

Answer 1

I think the problem comes from will-change.
As per MDN doc, it is intended to be used as a last resort. So maybe Google took it off to avoid performance problems.
Consider using transform property instead.
Hope it helps