Modal.destroyAll()在Mac正常运行但PC失效，求排查原因

问题原因 #

AntD 3.26.6 的 Modal.destroyAll() 依赖内部维护的模态框实例栈批量销毁弹窗，跨平台浏览器出现差异的核心原因有两个：

1. 浏览器DOM操作优先级差异：PC端Chrome/Edge在异步回调（比如会话过期的接口响应拦截）中执行DOM清理时，渲染队列的处理时机和Mac端不同，导致AntD内部的实例销毁逻辑与DOM节点更新不同步，残留的弹窗节点没被移除。
2. AntD 3.x 旧版本兼容性bug：该版本的Modal管理器在部分Windows平台浏览器下，对实例栈的跟踪存在漏洞，比如模态框打开时的实例注册时机延迟，导致destroyAll()遍历不到全部实例。

解决办法 #

临时修复（无需升级依赖） #

1. 手动兜底清理DOM节点：在调用Modal.destroyAll()后，手动移除页面上残留的模态框及遮罩层节点，利用setTimeout让DOM操作进入下一个事件循环，确保AntD的内置方法先执行：

// 会话过期处理逻辑
const handleSessionExpire = () => {
  Modal.destroyAll();
  // 兜底清理残留节点
  setTimeout(() => {
    const modals = document.querySelectorAll('.ant-modal');
    const masks = document.querySelectorAll('.ant-modal-mask');
    modals.forEach(el => el.remove());
    masks.forEach(el => el.remove());
  }, 0);
  // 后续跳转登录页等逻辑
};

2. 确保在React上下文内执行：如果是在axios拦截器这类React生命周期外的环境调用，可通过React的状态更新触发组件重渲染后再执行销毁，比如在全局状态中设置sessionExpired状态，在组件的useEffect（函数组件）或componentDidUpdate（类组件）中调用Modal.destroyAll()。

长期根治方案 #

1. 升级AntD 3.x到最新补丁版：AntD 3.x的最终稳定版本是3.26.20，官方修复了不少跨平台兼容性问题，升级后大概率能解决该bug，升级命令：

npm install antd@3.26.20 --save

2. 迁移到AntD 4+：AntD 4完全重构了Modal的管理逻辑，Modal.destroyAll()的实现更稳定，跨平台一致性更好。虽然需要适配部分API（比如Modal的配置项、样式），但从长期维护角度看更可靠。

排查验证方法 #

• 打印实例栈状态：在调用destroyAll()前后，打印(Modal as any).modalManager的内容，对比Mac和PC端的实例数量、状态，确认是否存在实例未被正确注册的情况。
• 调试DOM变化：在Chrome开发者工具的Elements面板，观察会话过期时模态框节点的变化，看是否有节点未被移除，定位是AntD逻辑未执行还是DOM清理失败。

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