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

[annsk]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/angular/bbylpommldm?file=app%2Fsidenav-fixed-example.ts (it's link from Angular Material documentation.

Steps to reproduce:

1. Select checkbox "fixed"

Expected Behavior

The sidenav should be over the header and footer in Safari.

Actual Behavior

What behavior did you actually see?
In Safari the sidenav is below the header and footer in Safari.

Environment

• Angular: 8.1.0
• CDK/Material: 8.0.2
• Browser(s): Safari 12.0.1,
• Operating System (e.g. Windows, macOS, Ubuntu): macOS, iOS

[Brhav]

+1

This behavior seems to be default 'out of the box' and quite inconvenient since Safari currently has 15% of the browser market share.

[Brhav]

This only occurs when using [fixedInViewport]. Workaround is not using this.

[jelbourn]

Duplicate of #11715

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}