Safari browser styling issue
Unanswered
Asiatic Lion posted this in #help-forum
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 ðŸ™
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
Rafael Almeida
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
that's how most modals work in component libraries
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?