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.
Modal's backdropposition: fixeddoesn't work properly if its ancestor has settransformproperty because it then acts as a containing block.One of the issues with that is when you want to have a
Modalinside anotherModal, it is positioned relative to the parentModalinstead of the browser viewport. We need to use something else thantransform: translate(-50%, -50%)to compensate forwidthandheightof theModalitself.