reactjs – would not css animation not work on ios chrome?

i am making an animation that present the menu by squentially giving delays. under 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/pictures/bg-main.png" alt="배경" />
      <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 />
        <Responsive className="py-20">
          /* menu */
          <ul className="flex flex-col items-start gap-9 overflow-hidden">
              <Hyperlink to="/about">About</Hyperlink>
              <Hyperlink to="/undertaking">Mission</Hyperlink>
              <Hyperlink to="/story">Story</Hyperlink>
              <Hyperlink to="/group">Group</Hyperlink>

export default Menu;

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

const Merchandise =`
  ${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 really works properly in desktop browsers and ios safari, however animation breaks off in ios chrome. is it a bug? any means answer?

i need it to work correctly on ios chrome.

Leave a Reply