ngx材质时间选择器：iPhone css忽略；位置：固定"；

我创建了一个StackBlitz来复制：

它有一个ngx材质时间选择器，具有以下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和桌面系统中，它的工作原理与预期一致。有没有已知的解决方案

是的@dmcgrandle，看起来像是z指数问题。但我发现有一个补丁的代码如下。在tabbar顶部添加

“custom-tabbar”

，并覆盖CSS，如下所示

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

---

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

此问题报告了一个bug

上面说,

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

这正是这里正在发生的事情。类为

.timepicker overlay

的固定定位元素放置在相对定位元素

.mat tab body active

内，该元素的z索引为1

因此，您现在可以做的是，覆盖该样式，并将活动选项卡的z索引设置为

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索引，则
mat tab group
将无法按预期工作。因为当我们将活动选项卡的z索引更改为initial时，它将在
mat选项卡
堆栈中向后移动。这是z-index的默认行为。您只能与最后一个选项卡交互

为了防止出现这种情况，我们可以在
.mat选项卡主体上设置指针事件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;
}

这是一张工作票

我已经对它进行了测试，下面是相同的屏幕截图。（此屏幕截图用于旧答案）
safari桌面中出现错误，因为safari在应用z索引时似乎不一致。您的覆盖有包含div吗？根据对的第一个答案，尝试在其上设置z索引。另一个有趣的讨论。谢谢，这实际上是我修复它的原因。我将它与：：ng deep.mat-tab-body-active一起使用。经过一段时间的测试，它不够可靠，无法使用，因为某些原因，有时它修复了它，有时它没有。不管怎样，这看起来很有效，但在离开标签时弄坏了其他材料标签。没有z-index，我无法与选项卡上的任何控件交互。我试图有条件地测试z索引，使其仅在一个选项卡上使用首字母，但无法使其工作。嗨@MDave，我已更新了答案。事实上，有几种可能的解决方案可以克服这个z索引问题，但是使用指针事件是最简单和干净的一种。我相信这将为你工作，如果它不，我将分享其他解决方案。