components icon indicating copy to clipboard operation
components copied to clipboard

Published 20 hours ago • verified publisher icon angular

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

Open brendanowens opened this issue 4 years ago • 9 comments

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

brendanowens avatar May 12 '20 20:05 brendanowens

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

maunrod avatar May 17 '20 10:05 maunrod

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

jelbourn avatar May 27 '20 22:05 jelbourn

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

martinsotirov avatar May 29 '20 10:05 martinsotirov

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

jordandh avatar Jun 02 '20 20:06 jordandh

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

Abadii avatar Jun 12 '20 15:06 Abadii

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

brendanowens avatar Jun 24 '20 13:06 brendanowens

Seeing the same issue with the latest version of Angular and Angular Material on the latest version of Safari. Does anyone have a lead on a solution?

michaelcm avatar Apr 18 '21 21:04 michaelcm

I just came here, after noticing how painfully slow nav-bar animation is in Safari on my latest 2023 Macbook Pro and Macbook Air. It is totally inconsistent with how it works elsewhere.

And I am using Angular v15.2.7. So, 3 years later, the issue and the issue hasn't been addressed. How come?

image

vitaly-t avatar Apr 23 '23 14:04 vitaly-t

Same in Angular 17.3.3 on macOS Safari 17.3.1. But sidenav on iOS Safari 17.4.1 working well.

UPD This problem is presents only in production build with service worker. Dev version of application working well.

indvd00m avatar Apr 16 '24 11:04 indvd00m