1

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.

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

2 Comments

thx for comment. i've already tried it, but it didn't work.
and when i looked it up, there's this problem of webkit. bugs.chromium.org/p/chromium/issues/detail?id=1231712

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.