ngx-material-timepicker: iPhone css 忽略 "position: fixed"

Question

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

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

.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

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

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

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

Answer 2

此处报告了此问题的错误 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

这正是这里发生的事情。具有 class .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，则 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 上对其进行了测试，这里是 screen-shot 相同的测试。 （此 screen-shot 用于旧答案）

ngx-material-timepicker: iPhone css 忽略 "position: fixed"

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

css

position

mobile-safari

angular