useAnimation ignores certain style declarations on browsers that don't support WebAnimations

[JohnKis]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Certain style definitions (like 'position', 'top', 'right' etc could be others as well) in reusable animations are ignored on browsers that don't support WebAnimations. This used to work fine in Angular 5 and earlier where the web animation polyfill was used. Interestingly, they work fine if defined directly on the transition - in a non reusable manner.

Expected behavior

Styles in reusable animations should work fine in all browsers, as it used to in Angular 5 and earlier.

Minimal reproduction of the problem with instructions

• Open the StackBlitz example both in Chrome and another browser that doesn't support WebAnimations.
• Click on the rectangle.
• Observe that it turns green in both browsers however it only applies the position and right properties in Chrome.

What is the motivation / use case for changing the behavior?

To be able use reusable animations properly regardless of the browser.

Environment

Angular version: 6.1.1


Browser:
- [x] Chrome (desktop) version 68
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version 11.1.2
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.9.4
- Platform: Mac

Others:

[matsko]

Alright I finally got to look at this. Turns out that position values are not understood by CSS keyframe animations. Safari (and perhaps all other non-web-animations browsers) full-out ignore position inside of the animation itself. This is why CSS properties such as right are ignored.

The fix here should be that the angular animation code should place position outside of the animation def and use it as a regular style for the duration of the animation.

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