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

user_3578774 0
Viewed 668

I am working on creating an internal project for my work and we have decided to add a modal popup to allow users to submit a bug report or a feature request. Everything works perfectly in Chrome (both ios and windows) and also works fine in Firefox.

In Safari in ios though, the modal doesn't actually show. The actual modal though can still be used and submitted and everything functions if you know where to click or if you view in the inspector it shows you where it is on the screen. Here are some screenshots to show the issue. Top one is it working in Chrome, and the bottom one is it in Safari.

enter image description here

enter image description here

So because I am able to still submit the form in Safari then it leads me to believe a few things that this shouldn't be:

  • An issue with overflow cutting off the box from being displayed
  • An issue with z-index because then I wouldn't be able to click the button or type into the textarea.

I have investigated a bit into the positioning of things because I know (super old) versions of browsers sometimes would render things weird if a child was position fixed buyt the parent was position relative etc.

I have not seen anything like this in over 10 years of web development so I am very curious to find the issue and to hear if anyone has some ideas to try.

Thank you!

reactjs cross-browser css javascript ios
1 Answers

It looks like you are using the modal component inline in the component. That would nest it deep into the layout. While there's nothing wrong with that, Safari might be inheriting some style somewhere that's causing the modal to render invisible (overflow, visibility, etc). Instead of trying to trace down which parent element is causing the inheritance issue, you could try React portals.

A portal allows you to render a component in a different part of the root document. I like this approach generally for modal windows anyway because you can place the modal HTML outside of the layout containers. I tend to have better control over the modal window in the root of the document without having to mess with layout's margin, padding, flex, float, etc.

Take for instance this index.html code (trimmed down a bit for readability):

<!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>

You will notice in there the <div id="overlays"></div>. You can use a portal to load a component in that div instead of the id="root" div.

In your Modal component code, you can render to a portal element:

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;

That would take the layout out of the equation when rendering the Modal and hopefully fix the issue in Safari.

Let us know how this works for you!

user_167435530
Related