sidenav: position: fixed rendering problems when inside of sidenav-container (relative) on Safari

[StickNitro]

Bug, feature request, or proposal:

What is the expected behavior?

See the example in the stackblitz which is taken from an app I am working on, there are several nested level of mat-sidenav-container and mat-drawer-container but it is the lower level that has the problem. In the application this component has a mat-sidenav which is fixedInViewport=true.

If you press 'View Sidenav' you will see the mat-sidenav open but seems that the top of the sidenav is hidden behind the containers, in fact there is a button in the sidenav' toolbar and if you move your mouse above the end of the View Sidenav button you will be able to click the button.

Example from Chrome showing the expected behaviour

What is the current behavior?

The expected behaviour is that the mat-sidenav should appear above the other elements, including the backdrop for that sidenav

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Stackblitz below that replicates this issue:
https://stackblitz.com/edit/angular-material2-sidenav-issue

What is the use-case or motivation for changing an existing behavior?

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

Angular: 6.1.10
Material: 6.4.7
OS: MacOS 10.13.6
Typescript: 2.7.2
Browsers affected: Safari

Is there anything else we should know?

I have tested this in Chrome and it works as expected (except for the overlay), I have not been able to test in Firefox or IE

[Splaktar]

This works properly on Firefox and Edge (Chromium) in addition to Chrome. But I can reproduce this issue with Safari 13.1 (15609.1.20.111.8) and Angular Material 9.2.4.

This is caused by this old Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=160953