Next.js Discord

Discord Forum

Safari browser styling issue

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Avatar
Asiatic LionOP
I have div which has display:flex style.
Inside the div, there are two divs. let's say A and B

and in the second div (B), I have button and modal as siblings.
when I click that button, then modal will appear. modal has {left: 0, top: 0, position: "fixed"} style

but it's calculating left and top based on div B, not body.

this issue occurred only on safari browser.
Anyone help me plz 🙏

4 Replies

Avatar
instead of rendering the modal inside the component tree it would be better to use a portal to render it higher up in the DOM tree: https://react.dev/reference/react-dom/createPortal
that's how most modals work in component libraries
Avatar
Asiatic LionOP
Thank you for your help.
I need to do it only using css. it's not related to react or next.js
is there any other solution?