0
201
VistasLa ventana emergente modal funciona correctamente pero es invisible en Safari. Reacción integrada con el panel de interfaz de usuario de material de Creative Tim
Estoy trabajando en la creación de un proyecto interno para mi trabajo y hemos decidido agregar una ventana emergente modal para permitir a los usuarios enviar un informe de error o una solicitud de función. Todo funciona perfectamente en Chrome (tanto iOS como Windows) y también funciona bien en Firefox.
Sin embargo, en Safari en ios, el modal en realidad no se muestra. Sin embargo, el modal real aún se puede usar y enviar y todo funciona si sabe dónde hacer clic o si ve en el inspector, le muestra dónde está en la pantalla. Aquí hay algunas capturas de pantalla para mostrar el problema. El superior funciona en Chrome y el inferior funciona en Safari.
Entonces, debido a que todavía puedo enviar el formulario en Safari, me lleva a creer algunas cosas que esto no debería ser:
- Un problema con el desbordamiento que impide que se muestre el cuadro
- Un problema con el índice z porque entonces no podría hacer clic en el botón o escribir en el área de texto.
He investigado un poco sobre el posicionamiento de las cosas porque sé que las versiones (súper antiguas) de los navegadores a veces hacen que las cosas se vuelvan raras si un niño tiene una posición fija pero el padre tiene una posición relativa, etc.
No he visto nada como esto en más de 10 años de desarrollo web, por lo que tengo mucha curiosidad por encontrar el problema y saber si alguien tiene algunas ideas para probar.
¡Gracias!
1 Respuestas
Responde la pregunta0
Parece que está utilizando el componente modal en línea en el componente. Eso lo anidaría profundamente en el diseño. Si bien no hay nada de malo en eso, Safari podría estar heredando algún estilo en algún lugar que esté causando que el modal se vuelva invisible (desbordamiento, visibilidad, etc.). En lugar de intentar rastrear qué elemento principal está causando el problema de herencia, puede probar los portales de React.
Un portal le permite representar un componente en una parte diferente del documento raíz. De todos modos, me gusta este enfoque en general para las ventanas modales porque puede colocar el HTML modal fuera de los contenedores de diseño. Tiendo a tener un mejor control sobre la ventana modal en la raíz del documento sin tener que meterme con el margen del diseño, el relleno, la flexión, la flotación, etc.
Tomemos, por ejemplo, este código index.html (recortado un poco para facilitar la lectura):
<!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> Notarás allí el <div id="overlays"></div> . Puede usar un portal para cargar un componente en ese div en lugar del div id="root" .
En su código de componente Modal, puede representar a un elemento del portal:
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;Eso eliminaría el diseño de la ecuación al renderizar el Modal y, con suerte, solucionaría el problema en Safari.
¡Háganos saber cómo funciona esto para usted!