animations: safari not animating back from the current state, but briefly jumping to the initial state

[fxck]

I'm submitting a...

[x] Bug report 

Minimal reproduction of the problem with instructions

Check https://stackblitz.com/edit/animations-ng-content-query-bug?file=app%2Fdummy.component.ts in Chrome 61+ and in Safari 11+ or check this video

(related issue, using the same code #19473)

Environment

Angular version: 5.0.0-x

Browser:
Chrome, Safari

cc @matsko

[matsko]

Alright I see the flicker. Looking into it. Thank you for reporting.

[fxck]

@matsko have you found what might be causing it?

[matsko]

This is an issue with the web-animations-js polyfill and we're relying on them to have a fix: web-animations/web-animations-js#144

[fxck]

@matsko there once was a mention of angular's own, and more lightweight, polyfill for web animations, is that not a thing anymore (seeing it disappeared from angular.io)?

[fxck]

@matsko looks like its a no fix at web-animations-js..

[fxck]

Here's another animation where it's jumping in safari https://stackblitz.com/edit/burger-menu?file=app%2Fapp.component.html and works fine in chrome

[samthe13th]

I'm having similar problems with nested safari translation animations jumping to the final state / flickering

[fxck]

@matsko any feedback please?

[skill83]

I'm experiencing this bug using
Angular version: 5.2.9

Browser:
Safari 11.0.3, ios 9.3.1 safari, ios 11.2.6 safari

[matsko]

I can confirm that as of 6.0.0-rc.0 this is fixed in Safari
https://stackblitz.com/edit/animations-ng-content-query-bug-jypwie?file=polyfills.ts

FYI with 6.0.0 there is no need anymore for the web-animations polyfill. Angular does everything now by itself.

[matsko]

http://animationsftw.in/#/ is also updated with 6.0.0 (Safari runs much better now).

[skill83]

Nice example! i was checking the code and there is also new stuff (es. :increment :decrement etc.).
I updated my project to 6.0.0-rc.0.
Now in safari i'm not experiencing anymore the flickering but some other strange behaviours occurs (in chrome everything is fine).

For example i have some router animation

animations: [
  trigger('routeAnimation', [
    ...
    //enter fade in
    //exit fade out
    transition('rc1 => rc1i, rc1i => rc1',
      group([
        useAnimation(enterFadeNC,environment.changePage),
        useAnimation(exitFadeNC,environment.changePage)
      ])
    )
  ])
]

this should be a simple cross fade between two pages and the code is this

export var enterFadeNC = animation([
  query(
    ':enter',
    [
      style({
        'position':'absolute',
        'top':0,
        'left':0,
        'height':'100%',
        'width':'100%',
        'opacity':'0'
      }),
      animate(
        '{{ time }} {{ easing }}',
        style({
          'opacity':'1'
        })
      )
    ], { optional: true }
  )
])
export var exitFadeNC = animation([
  query(
    ':leave',
    [
      style({
        'position':'absolute',
        'top':0,
        'left':0,
        'height':'100%',
        'width':'100%',
        'opacity':'1'
      }),
      animate(
        '{{ time }} {{ easing }}',
        style({
          'opacity':'0'
        })
      )
    ]
  )
])

in safari it's like no animation triggers instead just page changing while in other browsers everything is ok

[matsko]

@skill83 can you craft together a stackblitz example? I'll investigate from there onwards.

[fxck]

FYI with 6.0.0 there is no need anymore for the web-animations polyfill.

Lovely, thank you.

[skill83]

@skill83 can you craft together a stackblitz example? I'll investigate from there onwards.

I'll try to set it up tomorrow. Thanks

[skill83]

Hi @matsko ,
Here the stackblitzs

As you will see there are some issue (Safari 11.0.3).
(https://stackblitz.com/edit/animations-ng-content-query-bug-ej3f7z?file=app%2Fpage1.component.ts)

1. the sliding transition between page1 and page2 is working just the first time;
2. the cross fade is not working properly, it seems a wrong positioning of the entering comp.;

if i test the same with chrome 65 i get just the 1. while 2. works properly

If i remove all the explict width and height from the page and from the router
(https://stackblitz.com/edit/animations-ng-content-query-bug-x2piyg?file=app%2Fpage1.component.ts)

in safari i have the same behaviour with 1. 2. while in chrome some different stuff is happening:

3. during the sliding transition i cannot see the backgound yellow of the entering page 2;
4. during the cross fade the bg color is disappearing

I hope you can help me, and the stackblitzs are enough.
If you need more info plese do not esitate to ask me.

Thanks

[skill83]

@matsko did you had the chance to check the stackblitz?

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