bug(mat-tab-group): inner div cannot cover 100% of viewport, on iphone

[yanivamrami]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue
StackBlitz to reproduce:
https://stackblitz.com/edit/components-issue-dssxxk
or
https://stackblitz.com/edit/angular-3qr9lv

Attention - this will reproduce only on iOS (e.g. iPhone) with both Chrome and Safari.
On Android it works perfectly.
On computer with Chrome and F12 on - it works perfectly.

Steps to reproduce:

1. Create mat-tab-group with few mat-tab children.
2. Inside one of the children, set a div with 100% height, 100% width, fixed position, with top, right equal to zero and a high z-index. Also, set it with a background-color (e.g. blue) to easily reproduce the behavior.

Expected Behavior

What behavior were you expecting to see?
The created div should cover ALL viewport (top to bottom, right to left), including the mat-tab, mat-tab-group and any other components on the HTML page (e.g. navbar etc.)
In other words - all screen will be blue.

Actual Behavior

What behavior did you actually see?
The created div covers the entire page, but you cannot see it, although it has a blue background, the blue color appears only within the mat-tab. above the mat-tab it doesn't show the blue background, yet it covers the elements (e.g. if you have a button above the mat-tab-group, you cannot click it)

Environment

• Angular: 8
• CDK/Material: 8
• Browser(s): chrome, safari
• Operating System (e.g. Windows, macOS, Ubuntu): iOS

[crisbeto]

This sounds like some kind of browser rendering bug. It might be worth trying to add transform: translateZ(0) to your element.

[yanivamrami]

Hi, thanks for the input.

I have tried to add the code you mentioned on my DIV, it didn't work...

I did, however, found a workaround. It appears the mat-tab's overflow is causing this issue. I found the workaround here on GitHub (#16283) and gave it a try:
.tab-custom-overflow .mat-tab-body-wrapper, .tab-custom-overflow .mat-tab-body-active, .tab-custom-overflow .mat-tab-body-content { overflow: visible !important; }
it appears to be working. Still:

1. Why it works perfectly on Chrome on desktop and Android devices, without this workaround?
2. This is a workaround. Not a solution. As a result, the tab animation doesn't look good.

Thanks