模态弹出窗口功能正常，但在 safari 中不可见。使用 Creative Tim 材质 ui 仪表板内置 React答案

【问题标题】：Modal popup functions properly but is invisible in safari. Built in React using the Creative Tim material ui dashboard模态弹出窗口功能正常，但在 safari 中不可见。使用 Creative Tim 材质 ui 仪表板内置 React
【发布时间】：2021-10-24 05:39:04
【问题描述】：

我正在为我的工作创建一个内部项目，我们决定添加一个模式弹出窗口以允许用户提交错误报告或功能请求。一切都在 Chrome（iOS 和 Windows）中完美运行，在 Firefox 中也能正常运行。

不过，在 ios 的 Safari 中，模式实际上并没有显示。实际的模式仍然可以使用和提交，如果你知道点击哪里或者如果你在检查器中查看它会显示它在屏幕上的位置，一切都会起作用。以下是一些显示问题的屏幕截图。最上面的是它在 Chrome 中运行，最下面的是它在 Safari 中运行。

所以因为我仍然能够在 Safari 中提交表单，所以它让我相信一些不应该的事情：

溢出导致框无法显示的问题
z-index 出现问题，因为那时我将无法单击按钮或在文本区域中键入内容。

我已经对事物的定位进行了一些调查，因为我知道（超级旧）版本的浏览器有时会在孩子的位置固定而父母是相对位置等情况下使事情变得奇怪。

我在 10 多年的 Web 开发中从未见过这样的事情，所以我很想找到这个问题，并想知道是否有人有一些想法可以尝试。

谢谢！

【问题讨论】：

您应该继续检查 safari "devtools" 中的图层选项卡，以了解 z-index 排序。

标签： javascript css ios reactjs cross-browser

【解决方案1】：

看起来您正在使用组件中的模态组件内联。这会将它嵌套在布局中。虽然这没有什么问题，但 Safari 可能会在某处继承某些样式，导致模态呈现不可见（溢出、可见性等）。您可以尝试使用 React 门户，而不是尝试追踪导致继承问题的父元素。

门户允许您在根文档的不同部分呈现组件。无论如何，我通常喜欢这种方法用于模态窗口，因为您可以将模态 HTML 放置在布局容器之外。我倾向于更好地控制文档根目录中的模态窗口，而不必弄乱布局的边距、填充、弹性、浮动等。

以这个 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" div 中加载组件。

在您的 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;

这将在渲染 Modal 时将布局排除在外，并有望解决 Safari 中的问题。

让我们知道这对您有什么作用！

【讨论】：

成功了，谢谢！我使用 createPortal 链接这些框，效果很好。不太确定为什么 safari 仍然表现得如此怪异，但嘿，现在可以了 :)