Timing-function sometimes gets ignored in safari

[David van der Sluijs]

🐞 bug report

Affected Package

The issue is caused by package @angular/animations

Description

I'm trying to build a animation with angular animations, but if I choose a custom cubic-bezier timing function, it sometimes gets ignored in apple's safari browser (desktop and mobile).

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-qyj9rv

Chrome's behavior:

Safari's behavior:

🌍 Your Environment

Angular CLI: 9.1.3
Node: 12.14.1
OS: darwin x64

Angular: 9.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

[Sebastián Ferreras]

@SlateDave I found the same issue some time ago and, as far as I can tell, it doesn't happen sometimes but every time the animation involves adding or removing an element from the DOM as part of the animation.

Please take a look at this demo project: https://stackblitz.com/edit/angular-animations-safari

In the Stackblitz project, I created a very simple component with 5 squares. Each square has a different timing function:

• Square 1: ease
• Square 2: ease-in
• Square 3: ease-out
• Square 4: cubic-bezier (keeping the element in the DOM)
• Square 5: cubic-bezier (adding/removing the element to/from the DOM)

When you click Animate 1, 2, 3 and 4, the animation works fine both in Chrome and Safari. You can see that the animation timing function applied to each square is different (which is correct).

But if you click Animate All in Safari, you'll notice that all squares are animated using the same animation timing function even though they all have different timing functions being applied.

Apparently adding or removing the element from the DOM is breaking the animation timing function somehow. Could this be a bug in Safari Webkit?

[David van der Sluijs]

@sebaferreras I think there is an additional problem besides the one with adding and removing elements. And that is: If you interrupt the animation in the middle, Safari will use the "ease" function for all of them again.

[Sebastián Ferreras]

@SlateDave You're absolutely right, that's another way of reproducing the issue.

So, so far the issue seems to be happening when:

1. The animation involves adding or removing an element from the DOM.
2. The animation is interrupted in the middle (even if it doesn't add or remove anything from the DOM).

[Deleted user]

+1

[andrewatwood]

Nice reproduction. Happens to me with *ngIf based animations, never remembered to file the issue though, so good on you!

[David van der Sluijs]

Good news! This bug seems to have been fixed on the latest public beta version of macOS Big Sur and iOS 14 for me.

[Jeremy Elbourn]

Closing since this seems like it was a WebKit/Safari bug that has been fixed in later versions.

[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.}