Angular 4 Animations don't work on iOS Safari 10/11

Question

I've seen a lot of people around here talking about Angular animations. Well, no solutions is working for me. I'm currently using Angular 4, with angular-cli v1.1.1. I'm using Angular animation on several steps of my applications, in my router-outlet too. Turns out in Safari 10/11 ( mobile ) no animations is currently working. In my polyfills.ts I have the following line of code import 'web-animations-js'; which should work on every browser that doesn't fully support Angular animations. On IE 10/11 it's working, not perfectly but it's working. Firefox too. The real problem on mobile Safari 10/11 is the animate syntax. With this particular syntax any animation wouldn't work. my router-outlet doesn't even show.

I can't understand why this doesn't work, any clue? Thank you in advance!

EDIT:

initial: style({ transform: 'translateY(100vh)' }), animate: animate( ${phaseDuration}ms ${phaseDuration}ms ease-in, style({ transform: 'translateY(0)' }) ) };

This is the code that breaks everything, inside che enter transition

I'm guessing you did `npm install` the animations polyfill, right? — Osman Cea, Oct 24 '17 at 08:29
@OsmanCea Yes, I did. I'm not using the last version of Angular ( using the 4.0.0 for some business requirement ). and web-animation-js v.2.3.1 — sgrumo, Oct 24 '17 at 08:31
I had the same issue. Follow this link. It would help you: https://stackoverflow.com/a/71557862/6666348 — Kamran Taghaddos, Mar 21 '22 at 12:57

score 0 · Accepted Answer · answered Oct 25 '17 at 10:30

0

Turns out the polyfill library has several open issues with the integration with mobile Safari. However, if the iPhone or iPad requests for Desktop Site the animations work fine.

answered Oct 25 '17 at 10:30

sgrumo

615
2
8
24

I've had problems with keyframes with iOS even in latest Angular. Very erratic, but when doing simpler animations from state to state it was ok – Simon_Weaver Sep 04 '18 at 20:44

Angular 4 Animations don't work on iOS Safari 10/11

1 Answers1