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

@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) ??

[offroadkev]

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"