ngx-material-timepicker：iPhone css 忽略“位置：固定”

Question

我创建了一个 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 和桌面上，它按预期工作。有一个已知的解决方案吗？

Answer 1

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

它说，

WebKit 错误地剪辑位置：固定元素，在其“位置：相对；溢出：隐藏”父级内，如果该父级设置了“z-index”

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

所以您现在可以做的是，覆盖该样式并将活动选项卡的 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 上测试过，这是相同的屏幕截图。 （此屏幕截图适用于较旧的答案）

Answer 2

是的@dmcgrandle，这似乎是 z-index 问题。但是我找到了一个带有以下代码的补丁。在标签栏顶部添加 'custom-tabbar' 并覆盖 CSS，如下所示。

.custom-tabbar .mat-tab-body-active {
  overflow: visible !important;
  position: static;
}

我没有签入 iPhone，但我签入了模拟器。希望它对你有用。