Within our Angular 13 application, we have a modal component. The component's CSS includes the :host selector for the root element, which also serves as the style for the backdrop:
:host {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: flex-end;
overflow-x: hidden;
}
Strangely, when viewing this modal on iPhones (works fine on Windows 11 and Android phones), the entire component—including the backdrop and its content, such as the modal itself—is not visible at all.
Any insights into why this might be happening?
This issue does not occur with other modals or components in the application.