iOS Chrome中CSS菜单动画失效问题求助（twin.macro+emotion）

这不是严格意义上的浏览器Bug，而是iOS Chrome基于WebKit内核的渲染机制，在CSS动画触发时机、硬件加速调度上和桌面浏览器/iOS Safari存在差异导致的兼容性问题。以下是几个可行的解决办法：

解决办法1：强制开启硬件加速 #

iOS Chrome对will-change: transform的识别有时候不够可靠，直接添加3D变换属性强制浏览器将元素放入独立渲染层，避免动画过程中被中断：

修改Item的样式定义，添加transform: translateZ(0)：

const Item = styled.li`
  ${tw`-translate-x-full text-4xl font-bold text-white transition hover:text-gray-200`};
  /* 强制开启硬件加速，解决iOS Chrome渲染卡顿 */
  transform: translateZ(0);
  will-change: transform;
  
  &: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;
  }
`;

解决办法2：用JS控制动画触发时机 #

通过JavaScript在元素挂载后逐个触发动画，避免CSS自动触发时的渲染调度冲突，这种方式兼容性更好：

步骤1：修改组件逻辑，添加状态控制动画激活 #

import { useState, useEffect } from 'react';

const Menu = ({ onClose }: Props) => {
  // 记录已激活的菜单项索引
  const [activeItemIndexes, setActiveItemIndexes] = useState<number[]>([]);

  useEffect(() => {
    // 逐个添加延迟，触发对应菜单项的动画
    const timers = [0, 100, 200, 300].map((delay, index) => {
      setTimeout(() => {
        setActiveItemIndexes(prev => [...prev, index]);
      }, delay);
    });

    // 组件卸载时清除定时器
    return () => timers.forEach(timer => clearTimeout(timer));
  }, []);

  return (
    <>
      {/* 背景部分代码不变 */}
      <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">
          <ul className="flex flex-col items-start gap-9 overflow-hidden">
            {/* 用数组遍历生成菜单项，方便控制激活状态 */}
            {[
              { path: '/about', label: 'About' },
              { path: '/project', label: 'Project' },
              { path: '/story', label: 'Story' },
              { path: '/group', label: 'Group' },
            ].map((item, index) => (
              <Item key={index} isActive={activeItemIndexes.includes(index)}>
                <Link to={item.path}>{item.label}</Link>
              </Item>
            ))}
          </ul>
        </Responsive>
      </div>
    </>
  );
};

步骤2：修改Item样式，基于状态控制动画 #

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

const Item = styled.li<{ isActive: boolean }>`
  ${tw`text-4xl font-bold text-white hover:text-gray-200`};
  will-change: transform;
  /* 根据激活状态触发动画 */
  animation: ${props => props.isActive ? showMenu : 'none'} 0.3s ease-in-out forwards;
  -webkit-animation: ${props => props.isActive ? showMenu : 'none'} 0.3s ease-in-out forwards;
`;

解决办法3：调整父元素溢出属性 #

父元素ul的overflow:hidden可能和子元素的transform动画在iOS Chrome中产生渲染冲突，尝试将溢出控制移到每个Item上：

// 修改ul的className，移除overflow-hidden
<ul className="flex flex-col items-start gap-9">
  {/* 给Item添加overflow-hidden */}
  <Item className="overflow-hidden">
    <Link to="/about">About</Link>
  </Item>
  {/* 其他Item同理 */}
</ul>

以上方法中，JS控制动画触发的方式兼容性最稳定，强制硬件加速的方式改动最小，可以优先尝试。

内容的提问来源于stack exchange，提问作者Lucid