Modal and backdrop not showing on IPhone only (Angular 13)

Question

In our Angular 13 app, there is a modal component. In the component css there is this :host selector for the root and is also 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;
}

Now, Only on IPhones (Shows ok on: Windows 11, Android phones) all of the component, the component root as backdrop (and all its content - the modal itself) are not showing at all.

Any Idea why?

Doesn't happen in other modals or in other components

Answer 1

Ok, this is a weird one, and I'm not sure I understood everything, but it seems that the iPhone rendered the

:host { position: absolute }

differently that others. On absolute it renders the modal on the left side "outside" the iPhone screen:

The "fix" if I would call it that was to change the position to fixed :

If you have an explanation for this phenomena I'd love to hear it!