Components: bug([MatSidenav]): [Slow animation speed on Safari]

[brendanowens]

Reproduction

https://stackblitz.com/edit/angular-uasem8?file=src/app/sidenav-open-close-example.ts
^ This is a direct fork of the example from https://material.angular.io/components/sidenav/overview#opening-and-closing-a-sidenav

Steps to reproduce:

1. Open the stackblitz on Safari (desktop or mobile)
2. Click the toggle box to open/close the sidenav
3. Compare the speed of the animation to the speed on another browser (Chrome)

Expected Behavior

Animation speed should be the same across browsers

Actual Behavior

Animation speed is noticeably slower in Safari

Environment

• Angular: 9.0.0
• CDK/Material: 9.0.0
• Browser(s): Safari 13.1
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[maunrod]

Same issue detected. Slow animation of Sidenav component in Safari browser.

[jelbourn]

Confirmed that the animation is having issues on Safari. Might be a regression, since I don't remember seeing this in the past.

[martinsotirov]

Just noticed this today on my customer's app. Thought I was going crazy first.

[jordandh]

I can confirm the slow animation happens with Angular 7.1.1 in
MacOS 10.15.5 Safari 13.1.1
iPadOS 13.5 Safari
iOS 13.5 Safari

[Abadii]

I confirm the exact same problem. The sidenav is slower in Safari. Expected speed is the same as chrome

[brendanowens]

I noticed that this is resolved in Safari on iOS 14.0 Developer Preview with Angular 9. Wondering what changes to Safari fixed it...