移动端Safari模态框打开后关闭键盘时冻结无法点击的问题求助

各位大佬好！我现在遇到一个头疼的问题：在Mobile Safari上打开模态框后，只要点击输入框唤起键盘，关闭键盘的时候整个模态框就会冻结，完全没法点击任何元素。但在Mobile Chrome和桌面端的所有浏览器里都正常运行，有没有大佬能帮忙看看咋解决呀？万分感激！

相关代码 #

Modal.tsx #

import React, { HTMLAttributes, useEffect } from "react";
import ReactDOM from "react-dom";
import Overlay from "./Overlay";

export interface ModalProps extends HTMLAttributes<any> {
  isOpen: boolean;
  pixelUp?: number;
  title?: string | any;
  bottomPadding?: string;
  contentCentered?: boolean;
  children?: any;
  modalClassName?: string;
  zIndex?: number;
}

const Modal = ({
  isOpen,
  pixelUp = 0,
  title = "",
  bottomPadding = "pb-0",
  contentCentered = false,
  modalClassName = "",
  zIndex = 50,
  ...props
}: ModalProps) => {
  useEffect(() => {
    if (isOpen) {
      const scrollY = window.scrollY;
      document.body.style.position = "fixed";
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = "100%";
      document.body.style.overflow = "hidden";

      return () => {
        document.body.style.position = "";
        document.body.style.top = "";
        document.body.style.width = "";
        document.body.style.overflow = "";
        window.scrollTo(0, scrollY);
      };
    }
  }, [isOpen]);

  if (!isOpen) return null;

  const { className, children, ...restProps } = props;

  return ReactDOM.createPortal(
    <Overlay>
      <div
        className={`fixed inset-0 flex items-center justify-center pointer-events-none`}
        style={{ zIndex }} // keep the z-index prop working
      >
        {/* Must be 75vh for roster form height fix */}
        <div
          className={`bg-white rounded-lg shadow-lg w-full max-w-lg max-h-[80vh] overflow-y-auto p-6 ${modalClassName}`}
          style={{ pointerEvents: 'auto' }}
        >
          {title ? (
            <div className={`font-bold mb-2 text-center`}>{title}</div>
          ) : (
            <></>
          )}
          <div
            className={`${bottomPadding} max-h-[calc(80vh-3rem)] ${
              contentCentered ? "text-center" : ""
            }`}
          >
            {children}
          </div>
        </div>
      </div>
    </Overlay>,
    document.body
  );
};

export default Modal;

Overlay.tsx #

import React from "react";

const Overlay = ({ children = null }) => {
  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-50 z-50"
      style={{ touchAction: 'none', overscrollBehavior: 'none' }}
    >
      {children}
    </div>
  );
}

export default Overlay;

内容来源于stack exchange