React移动端随机出现覆盖式Canvas元素的排查方法咨询

针对你遇到的React应用移动端随机出现全屏Canvas遮罩的问题，给你几个针对性的排查方向：

• 用DOM变化追踪工具抓创建时机
  打开Chrome DevTools的「Sources」面板，新建代码片段，用MutationObserver监听body下的元素添加，一旦发现canvas就打印调用栈：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      const addedCanvas = [...mutation.addedNodes].find(node => node.tagName === 'CANVAS');
      if (addedCanvas) {
        console.log('Canvas detected:', addedCanvas);
        console.trace('Creation stack');
        observer.disconnect(); // 找到后停止监听
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

  触发问题后，调用栈会显示创建canvas的脚本源头，直接定位问题。

• 重点排查Stripe相关组件的隐性行为
  你的依赖里包含Stripe支付库，移动端支付流程（比如3DS验证、银行卡识别）有时会通过canvas实现交互遮罩。即使你觉得禁用了相关组件，可能某些初始化逻辑仍在后台运行（比如loadStripe的全局初始化）。可以尝试完全移除Stripe相关的导入和代码，再测试是否还会出现问题。

• 检查移动端特定API触发逻辑
  问题仅出现在移动端，大概率和触摸事件、全屏API或设备传感器相关。排查有没有组件在处理触摸事件时意外创建canvas，或者第三方库的移动端专属逻辑（比如react-hot-toast的移动端提示变体，虽可能性低但可排查）。

• 简化项目到最小可复现状态
  新建空白React项目，只保留核心依赖（react、react-dom、react-scripts），测试是否正常。如果没问题，再逐个添加你的依赖（先加redux，再加axios，最后加Stripe），每加一个就测试移动端，直到问题复现，精准定位出问题的依赖。

• 排查React Portal的隐性渲染
  有些组件会用ReactDOM.createPortal把元素挂载到body上而非组件内部。检查代码里有没有使用Portal的地方，或者依赖库是否用了Portal创建canvas。可以在DevTools的「Elements」面板查看canvas的父元素，确认是否直接挂在body下。

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