移动端Safari快速滑动Fancybox图库并关闭模态框后页面重渲染问题求助

我现在碰到一个挺棘手的问题：用React+Next.js搭配Fancybox做的图片画廊组件，在所有浏览器里都运行正常，唯独在移动端Safari上出了状况——当我快速滑动浏览模态框里的照片，关闭模态框之后，整个页面会突然闪一下（也就是触发了重渲染）。

下面是我简化后的实现代码：

useEffect(() => {
  const initFancybox = () => {
    const isMobile = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    Fancybox.bind(document.body, "[data-fancybox]", {
      dragToClose: true,
      closeButton: "auto",
      Images: { zoom: false },
      on: {
        ready: (fancybox) => {
          const instance = fancybox as FancyboxInstance;
          if (isMobile) {
            let startY = 0;
            let isSwiping = false;
            instance.container.addEventListener('touchstart', (e) => {
              startY = e.touches[0].clientY;
              isSwiping = true;
            }, { passive: true });
            instance.container.addEventListener('touchmove', (e) => {
              if (!isSwiping) return;
              const diffY = Math.abs(e.touches[0].clientY - startY);
              if (diffY > 50) instance.close();
            }, { passive: true });
          }
        },
        destroy: () => setTimeout(initFancybox, 100)
      }
    });
  };

  initFancybox();
  return () => Fancybox.destroy();
}, []);

我已经尝试过这些方法，但都没解决问题：

• 在触摸事件处理器里添加preventDefault()
• 调整被动事件监听器的各种配置
• 给滑动事件添加防抖处理
• 手动显式清理所有事件监听器

我的开发环境：

• React 18
• Next.js 14
• Fancybox 5.0
• iOS 15+ Safari

我怀疑可能的问题点：

• 快速绑定事件监听器导致的内存泄漏
• Safari过于激进的页面缓存行为
• React虚拟DOM和Fancybox之间的交互冲突

特别奇怪的是，只有快速滑动之后才会触发这个问题，正常速度操作的话完全没问题。有没有大佬能给点排查思路或者解决方案呀？

内容来源于stack exchange