模式弹出功能正常，但在 safari 中不可见。 Built 在 React 中使用 Creative Tim material ui 仪表板

Question

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

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

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

溢出会切断方框显示的问题
z-index 出现问题，因为那样我就无法单击按钮或在文本区域中输入内容。

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

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

谢谢！

Answer 1

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

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

以这段 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.

中加载组件

在您的模态组件代码中，您可以渲染到门户元素：

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 中解决此问题。

让我们知道这对您有用！

模式弹出功能正常，但在 safari 中不可见。 Built 在 React 中使用 Creative Tim material ui 仪表板

Modal popup functions properly but is invisible in safari. Built in React using the Creative Tim material ui dashboard

javascript

css

ios

reactjs

cross-browser