4

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? enter image description here

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
MDave
  • 1,245
  • 13
  • 29
  • error appears in safari desktop too – Patricio Vargas Jun 13 '19 at 04:55
  • Safari seems to be inconsistent in applying z-index. Is there a containing div for your overlay? Try setting the z-index on it as well, as per the first answer to [this question](https://stackoverflow.com/questions/27071462/safari-ignores-z-index-value). Another interesting discussion [here](https://greensock.com/forums/topic/16341-zindex-and-safari-issue/). – dmcgrandle Jun 19 '19 at 17:13

2 Answers2

1

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.

Hardik Solanki
  • 325
  • 1
  • 6
  • Thanks, this is actually what fixed it for me. I used it with ::ng-deep .mat-tab-body-active. – MDave Sep 27 '19 at 22:10
  • After testing this for a while it wasn't reliable enough to use, for some reason sometimes it fixed it and sometimes it didn't. Thanks anyway – MDave Oct 03 '19 at 17:54
1

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) enter image description here

HirenParekh
  • 3,655
  • 3
  • 24
  • 36
  • This appeared to work but broke the other material-tabs when leaving the tab. Without the z-index I couldn't interact with any controls on the tabs. I tried conditionally estting the z-index to initial only on one tab, but couldn't get it to work. – MDave Oct 03 '19 at 17:56
  • Hi @MDave I have updated the answer. Actually there are several possible solution to overcome this z-index issue, but using pointer-events is the easiest and clean one. I am sure that this will work for you if it doesn't I will share other solutions. – HirenParekh Oct 04 '19 at 11:51