[英]Modal and backdrop not showing on IPhone only (Angular 13)
In our Angular 13 app, there is a modal component.在我们的 Angular 13 应用程序中,有一个模态组件。 In the component css there is this
:host
selector for the root and is also the style for the backdrop:在组件 css 中有这个
:host
根选择器,也是背景的样式:
: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.现在,仅在 iPhone 上(显示正常:Windows 11、Android 手机)所有组件、作为背景的组件根(及其所有内容 - 模态本身)根本不显示。
Any Idea why?知道为什么吗?
Doesn't happen in other modals or in other components不会发生在其他模态或其他组件中
Ok, this is a weird one, and I'm not sure I understood everything, but it seems that the iPhone rendered the好的,这很奇怪,我不确定我是否理解了所有内容,但似乎 iPhone 呈现了
:host { position: absolute }
differently that others.与其他人不同。 On absolute it renders the modal on the left side "outside" the iPhone screen:
在 absolute 上,它在 iPhone 屏幕“外部”的左侧呈现模态:
The "fix" if I would call it that was to change the position to fixed
:如果我称之为“修复”,那就是将 position 更改为
fixed
:
If you have an explanation for this phenomena I'd love to hear it!如果您对这种现象有任何解释,我很想听听!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.