iOS 14-15中CSS动画结束后点击事件失效问题求助

这是iOS 14-15版本Safari浏览器的典型兼容性bug，结合你的代码场景，我整理了几个针对性的解决方案：

一、问题核心原因 #

iOS 14-15的Safari在处理元素从不可见状态（比如display: none）通过CSS动画切换为可见的过程中，动画结束瞬间会出现事件响应延迟或丢失的问题。另外你使用<a>标签作为按钮并设置href="#"，会触发浏览器默认跳转行为，和React的点击事件触发时机冲突，进一步加重了这个问题。

二、具体解决方案 #

1. 替换<a>标签为原生<button>元素

原生按钮是专门为交互设计的，浏览器对它的事件处理逻辑更稳定，能避免链接默认行为的干扰：

// Modal.tsx 修改后的按钮代码
<button
  className="close"
  onClick={close}
  style={{ 
    textDecoration: "none",
    background: "transparent",
    border: "none",
    cursor: "pointer",
    // 保留你原有按钮样式
  }}
>
  <!-- 关闭按钮内容 -->
</button>

2. 给模态框容器添加touch-action: manipulation样式

这个CSS属性可以强制Safari优化触摸事件处理，避免动画结束时的点击事件被吞掉：

/* 模态框容器的CSS */
.modal-container {
  touch-action: manipulation;
  /* 你的原有动画样式，比如淡入过渡 */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-container.show {
  opacity: 1;
}

3. 改用visibility+opacity控制模态框显示

避免使用display: none切换状态，让元素始终存在于DOM中，减少动画结束时的DOM状态突变：

/* 修改模态框显示隐藏逻辑 */
.modal {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 隐藏时禁止点击 */
}
.modal.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* 显示时允许点击 */
}

4. 延迟启用按钮点击事件

通过React状态控制，在模态框显示后延迟一小段时间（比如100ms）再启用按钮，避开动画结束的敏感瞬间：

// Modal.tsx 新增逻辑
import { useState, useEffect } from 'react';

const Modal = ({ show, close, title, children }) => {
  const [isClickable, setIsClickable] = useState(false);

  useEffect(() => {
    if (show) {
      const timer = setTimeout(() => setIsClickable(true), 100);
      return () => clearTimeout(timer);
    } else {
      setIsClickable(false);
    }
  }, [show]);

  return (
    <div className={`modal ${show ? 'show' : ''}`}>
      {/* 其他模态框内容 */}
      <button
        className="close"
        onClick={isClickable ? close : undefined}
        disabled={!isClickable}
        style={{ textDecoration: "none" }}
      >
        关闭
      </button>
    </div>
  );
};

三、验证建议 #

优先尝试方案1和方案2，这两个改动最小且能解决大部分场景的问题；如果仍有问题，再结合方案3或4调整。

备注：内容来源于stack exchange，提问作者nato nato