Components: Fixed Sidenav is clipped by mat-sidenav-container in Safari

[lucferbux]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-sidenav element to display fixed in Safari, this sidenav is the one generated with Angular CLI.
ng generate @angular/material:material-nav --name=my-nav-example

What is the current behavior?

Works fine in Google Chrome, but it's hidden in Safari 11.1. (See snapshots below)

What are the steps to reproduce?

In a new project generate the sidnav.
ng generate @angular/material:material-nav --name=my-nav-example
Place it in app.component.html.

I have build the project into production and the issue still persists.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.0.2.tgz",
"integrity": "sha512-928g7cnnRIJJx9/pC5GWqypcxrKkfijTCrCC6yeypvcgab1pmsk7m+1uE8VSFGIsUb6x8W3CF5nJUT1viuBIZg==",
"requires": {
"tslib": "^1.7.1"
}

Google Chrome

Safari

[lucferbux]

I have check that the issue is opened in #11392
But I don't see a real fix in the suggested ones, I will leave the issue open for more info.

[amcdnl]

Fixed by - https://github.com/angular/material2/pull/11191/files#diff-98cc0250d23a2ee2df9c0b956a89c124R84

[ssgriffen]

Hey @amcdnl Is the fix in prod? I've upgraded to 6.3.0 and am still having this issue?

[lucferbux]

Same here @amcdnl I've upgraded my project to 6.3.0 and it's still broken. The fix is in that version?

[amcdnl]

You will need to re-generate the schematic.

[visyan]

Hi, facing this issue as well even after update to @angular/material 6.4.1. What do you mean by 're-generate the schematic' ?

[Mischazz]

mat-drawer-container{ overflow: visible; }
I added this as temporary fix. That worked for me

[ghost]

@Mischazz thanks a lot for that! I think it has to be
.mat-drawer-container{ overflow: visible; }
though, just for anyone wondering in the future.

[olefrank]

This doesn't seem to be fixed yet (7.0.0-beta.23) ??

[vegaskev]

mat-drawer-container { overflow: visible; } did not solve the issue for me. I'm running 7.2.0

[kesavik]

@vegaskev try .mat-drawer-container{ overflow: visible; }. It worked for me.

[GeoffMahugu]

@Mischazz Having the same issue and .mat-drawer-container{ overflow: visible; } didn't work for me
I'm currently in "@angular/material": "^7.3.6"

[dheeraj-kawatra]

.mat-drawer-container{
position: fixed;
overflow: visible;
height: 75px;

.mat-drawer-backdrop {
    height: 100vh;
}

}

This met my requirements. tweak for your own.

[Brhav]

If somebody is looking into this, it may be interesting to also look at #16491 which seems to be closely related

[jelbourn]

This is caused by a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=160953

mat-sidenav-container is overflow: hidden and has a z-index. This triggers the bug in Safari that incorrectly causes the position: fixed mat-sidenav element to be clipped by the containing mat-sidenav-container.

Since the WebKit bug has been open since 2016, we should probably work around this on our end.

The StackBlitz from #16491 is a good reproduction.

[aleperfetti81]

Hi Guys,

is this problem fixed? I've tried with @vegaskev solution but it didn't worked. can you help me?
I face the problem only on safari and chrome on IOS.

Thank you very much for your help!

[lukekroon]

I have the same problem on Angular Material 10.2. The mentioned suggestions does not work for me. Any other workarounds?

[aleperfetti81]

Hi guys, any solution?