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

Question

I created a StackBlitz to reproduce: https://stackblitz.com/edit/angular-rdzdxx

It has an ngx-material-timepicker with the following 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;
}

In iPhone only, the css is locked inside the child-component. In Android and desktop it works as expected. Is there a known solution to this?

user_3947376 · Answer

yes @dmcgrandle, it seems like z-index issues. But I find one patch with below code. add 'custom-tabbar' on top of tabbar and override CSS like below.

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

I didn't check in iPhone but I have a check in an emulator. Hope it's work for you.

user_1160236 · Answer

There is a bug reported for this issue here https://bugs.webkit.org/show_bug.cgi?id=160953

It says,

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

This is exactly what is happening here. The fixed positioned element with class .timepicker-overlay is placed inside the relatively positioned element .mat-tab-body-active which has a z-index of 1.

So what you can do for now is, override that style and set z-index for the active tab to 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;
}

But If you change z-index of .mat-tab-body.mat-tab-body-active then mat-tab-group will not work as expected. Because as we change the z-index of active tab to initial it will go backward in the mat-tab stack. It's the default behavior of z-index. And you can only interact with the last tab.

To prevent that we can set pointer-events CSS property on .mat-tab-body as follows.

.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;
}

here is a working demo.

I have tested it on browserstack, here is the screen-shot for same. (this screen-shot is for the older answer)

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

2 Answers