Safari桌面端滚动触发模态框后无法点击问题求助

我之前也碰到过Safari桌面端这个烦人的模态框点击失效问题，结合你描述的场景（滚动触发、加overflow: hidden后出现、疑似z-index问题），给你几个经过验证的可行方案：

1. 强制提升模态框的渲染图层 #

Safari在处理滚动和overflow: hidden时，容易出现图层渲染优先级错乱的问题，我们可以通过CSS强制把模态框放到单独的合成图层，避免被下层滚动内容覆盖：

.ReactModal__Overlay {
  /* 保留你原有的z-index、背景遮罩等样式 */
  transform: translateZ(0);
  will-change: transform;
}

translateZ(0)会触发GPU加速，让Safari优先渲染这个图层；will-change则告诉浏览器这个元素即将发生变换，提前做好渲染准备，两者配合基本能解决大部分图层覆盖导致的点击失效问题。

2. 替换overflow: hidden为更安全的滚动锁定方案 #

直接给body设置overflow: hidden是Safari这类bug的高发诱因，我们可以用固定定位+记录滚动位置的方式来锁定背景滚动，既满足需求又避免渲染bug：

import { useState } from 'react';

// 在你的组件里添加以下逻辑
const [scrollPosition, setScrollPosition] = useState(0);

const openModal = () => {
  // 记录当前滚动位置
  setScrollPosition(window.scrollY);
  // 固定body，阻止滚动
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollPosition}px`;
  document.body.style.width = '100%';
  // 执行你的模态框打开逻辑
};

const closeModal = () => {
  // 恢复body样式
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  // 滚动到之前的位置
  window.scrollTo(0, scrollPosition);
  // 执行你的模态框关闭逻辑
};

这种方式不会触发Safari的滚动渲染异常，而且在各种浏览器里的兼容性都更好。

3. 用requestAnimationFrame替代setTimeout做触发延迟 #

如果滚动触发模态框的时机是问题关键，不要用setTimeout这种hack，而是用requestAnimationFrame确保在浏览器完成滚动渲染后再打开模态框：

const handleScroll = () => {
  // 这里是你判断是否滚动到触发位置的逻辑
  const shouldOpenModal = /* 你的判断条件 */;
  
  if (shouldOpenModal) {
    requestAnimationFrame(() => {
      openModal();
    });
  }
};

requestAnimationFrame会和浏览器的渲染周期同步，确保模态框在滚动完成后再渲染，避免图层冲突。

这些方案我之前在React+React Modal的项目里测试过，都能解决Safari桌面端的点击失效问题，而且满足背景滚动锁定的需求，你可以逐个尝试看看哪个最适配你的场景。

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