`Modal` fixed position does not work properly when an ancestor has set transform property
hubacekj opened this issue · 3 comments
Modal's backdrop position: fixed doesn't work properly if its ancestor has set transform property because it then acts as a containing block.
One of the issues with that is when you want to have a Modal inside another Modal, it is positioned relative to the parent Modal instead of the browser viewport. We need to use something else than transform: translate(-50%, -50%) to compensate for width and height of the Modal itself.
Can @adamkudrna comment on potential solutions?
My take on replacing transform is to use negative margins of half width and height of the Modal itself, which we can get from JS. Not sure of potential issues of this solution such as window resizing, though.
Hmm, would be interesting to investigate if the problem exists also with the <dialog> element (which I'd like to switch to because of its advantages).