bug(mat-stepper): flickering animation on steps navigation (iOS 17)

[stefanoquaranta]

Is this a regression?

• [x] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15

I can confirm that Angular 15 on iOS 17.1.2 doesn't have the mat-stepper animation issue

Description

When using the mat-stepper component on a iOS 17.1.2 device with Safari browser, the animation happening between steps navigation will flicker instead of being smooth.

Other components animations seems to be ok, only mat-stepper seems to be affected.

Reproduction

To reproduce the behavior: with a iOS 17.1.2 device, simply go on current Angular Material documentation under "stepper" page and navigate between steps.

The animation will flicker.

https://material.angular.io/components/stepper/overview

Expected Behavior

Smooth animation when selecting a step

Actual Behavior

Animation flickers when selecting a step

Environment

• Angular: 16.2.12 (but also in 17.0.2)
• CDK/Material: 16.2.12 (but also in 17.0.2)
• Browser(s): Safari
• Operating System: iOS -> 17.1.1, 17.1.2

[stefanoquaranta]

I think it is possible that it has something to do with the following change in source code:

https://github.com/angular/components/commit/53242fe58eecd6cf6556e6e343f7323bcc5ef006#diff-94f5a48d6504a246ee8183eed6825c40707b68e737fc424fd4ae3c3f6eb9623b

The usage of Angular animation "group" (to define a list of animations to be run in parallels) may be the issue.

Now I remember, I had noticed the same issue when I updated a project from Angular 14 up to 16 earlier this year, all the Angular animations using "group" where flickering. I had to get rid of parallels animations declared with "group", to go back to only one animation (and remove "group"), because of this same particular issue.

But iOS 17 wasn't released yet at this time, so I guess it's not only a iOS related issue.

[gilsondia]

[@.disabled]="true" until it gets fixed, it is not ideal but it won't glitch

[mhosman]

Do we have any fix for this?

[rflect-ch]

Yes, for me this happens only on horizontal stepper, vertical is having transition without issue. Would be good to address it if possible. Disabling animations is solution for now, but users lose the feeling of transition which is at least in our app important part of experience.

[mhosman]

Yes, the same for me, the issue is in horizontal stepper.

[rojingharooni]

i have the same problem with angular 16 angular material 16 it only happens on some versions of ios i'm using horizontal mat stepper angular plzzzzz fix this so far i disabled animation on ios:

[animationDuration]=" platform.IOS? '1' : '' "