Safari专属滚动覆盖层交互失效Bug求助

问题核心 #

Safari小窗口环境下，二次触发滚动显示overlay后，层内交互元素（如YT视频、滑块）无法响应点击操作，反而会触发锁定背景的文本选中。该问题仅出现于Safari，Chrome、Firefox等浏览器表现正常，手动调整窗口大小可临时修复，但需程序化触发页面重绘的有效方案。

可行修复方法 #

• 强制触发浏览器重绘/回流：在overlay显示完成后，对主容器或overlay执行无意义的样式修改，模拟窗口调整带来的重绘触发：

  // 显示overlay后执行该逻辑
  const mainContent = document.querySelector('.main-content');
  // 启用硬件加速触发重绘
  mainContent.style.transform = 'translateZ(0)';
  setTimeout(() => {
    mainContent.style.transform = '';
  }, 0);
  

  或通过读取元素布局属性强制回流：

  // 显示overlay后执行
  void document.querySelector('.overlay').offsetWidth;
  

• 优化滚动锁定逻辑：避免直接修改body的overflow属性，改用position: fixed锁定主内容并记录滚动位置，减少Safari渲染冲突：

  let savedScrollTop;
  // 锁定主内容
  function lockContent() {
    savedScrollTop = window.pageYOffset;
    document.body.style.position = 'fixed';
    document.body.style.top = `-${savedScrollTop}px`;
  }
  // 解锁并恢复滚动位置
  function unlockContent() {
    document.body.style.position = '';
    window.scrollTo(0, savedScrollTop);
  }
  

• 延迟绑定交互事件：确保overlay的交互元素在DOM完全渲染后再绑定事件，避免Safari事件委托失效：

  function showOverlay() {
    // 显示overlay的核心逻辑
    requestAnimationFrame(() => {
      // 初始化YT视频、滑块等交互元素
      initOverlayInteractiveElements();
    });
  }
  

• 临时禁用背景文本选中：overlay显示时给主内容添加文本禁止选中样式，避免点击穿透触发文本选中：

  .main-content.locked {
    user-select: none;
    -webkit-user-select: none; /* Safari兼容前缀 */
  }
  

验证建议 #

优先测试强制重绘方案，因手动调整窗口本质是触发浏览器重绘，程序化模拟该动作最直接。若单方案无效，可结合滚动锁定逻辑优化与事件绑定延迟方案组合测试。

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