我正在为我的工作创建一个内部元素，我们决定添加一个模式弹出窗口以允许用户提交错误报告或功能请求。一切都在 Chrome(iOS 和 Windows)中完美运行，在 Firefox 中也运行良好。
虽然在 ios 的 Safari 中，模态实际上并没有显示。实际的模式仍然可以使用和提交，如果你知道点击哪里或者如果你在检查器中查看它会显示它在屏幕上的位置，一切都会起作用。以下是一些显示问题的屏幕截图。顶部是在 Chrome 中运行，底部是在 Safari 中运行。
因为我仍然能够在 Safari 中提交表单，所以它让我相信一些不应该的事情:
- 溢出导致盒子无法显示的问题
- z-index 的问题，因为那时我将无法点击按钮或在文本区域中输入内容。
我对事物的定位进行了一些调查，因为我知道(超旧)版本的浏览器有时会在 child 位置固定而 parent 相对位置等情况下使事情变得奇怪。
在 10 多年的 Web 开发中，我从未见过这样的事情，所以我非常想找到这个问题，并想听听是否有人有一些想法可以尝试。
谢谢!
最佳答案
看起来您正在组件中内联使用模态组件。这会将它嵌套到布局深处。虽然这没有任何问题，但 Safari 可能在某处继承了某种样式，导致模态呈现不可见(溢出、可见性等)。您可以尝试 React 门户，而不是试图追查哪个父元素导致继承问题。
门户允许您在根文档的不同部分呈现组件。无论如何，我通常都喜欢这种用于模态窗口的方法，因为您可以将模态 HTML 放置在布局容器之外。我倾向于更好地控制文档根目录中的模态窗口，而不必弄乱布局的边距、填充、 flex 、 float 等。
以这段 index.html 代码为例(为了便于阅读而略微删减):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="overlays"></div>
<div id="root"></div>
</body>
</html>
您会注意到其中的 <div id="overlays"></div> .您可以使用门户加载该 div 中的组件，而不是 id="root"分区
在您的 Modal 组件代码中，您可以渲染到门户元素:
import { createPortal } from 'react-dom';
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<>
{createPortal(
<div className="modal">
<div className="modal__content">{props.children}</div>
</div>,
portalElement
)}
</>
);
};
export default Modal;
这会在渲染模态框时将布局排除在外，并有望在 Safari 中解决此问题。
让我们知道这对您有何帮助!
关于javascript - 模式弹出功能正常，但在 safari 中不可见。使用 Creative Tim Material ui 仪表板内置 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68899909/