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

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

[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.