gpt4 book ai didi

css - ngx-material-timepicker : iPhone css ignores "position: fixed"

转载 作者:太空狗 更新时间:2023-10-29 18:27:37 26 4
gpt4 key购买 nike

我创建了一个 StackBlitz 来重现:https://stackblitz.com/edit/angular-rdzdxx

它有一个带有以下 css 的 ngx-material-timepicker:

.timepicker-backdrop-overlay[_ngcontent-c23] {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0,0,0,.3);
z-index: 999;
pointer-events: auto;
}

仅在 iPhone 中,CSS 被锁定在子组件内。在 Android 和桌面上,它按预期工作。有没有已知的解决方案? enter image description here

最佳答案

此处报告了此问题的错误 https://bugs.webkit.org/show_bug.cgi?id=160953

它说,

WebKit incorrectly clips position:fixed element, inside of its "position:relative; overflow: hidden" parent, IF that parent has "z-index" set

这正是这里发生的事情。具有类 .timepicker-overlay 的固定定位元素放置在相对定位元素 .mat-tab-body-active 内,其 z-index 为 1。

所以您现在可以做的是,覆盖该样式并将事件选项卡的 z-index 设置为 initial

.mat-tab-body.mat-tab-body-active {
position: relative;
overflow-x: hidden;
overflow-y: auto;
z-index: initial; // set z-index to inital
flex-grow: 1;
}

但是,如果您更改 .mat-tab-body.mat-tab-body-active 的 z-index,则 mat-tab-group 将无法按预期工作.因为当我们将事件选项卡的 z-index 更改为初始值时,它将在 mat-tab 堆栈中向后移动。这是 z-index 的默认行为。而且您只能与最后一个选项卡进行交互。

为了防止这种情况,我们可以在 .mat-tab-body 上设置 pointer-events CSS 属性,如下所示。

.mat-tab-body{
pointer-events: none;
}
.mat-tab-body.mat-tab-body-active {
position: relative;
overflow-x: hidden;
overflow-y: auto;
z-index: initial;
flex-grow: 1;
pointer-events: all;
}

这是一个有效的 demo .

我已经在 browserstack 上测试过了, 这是相同的屏幕截图。 (此屏幕截图用于较旧的答案) enter image description here

关于css - ngx-material-timepicker : iPhone css ignores "position: fixed",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56572314/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com