Animations end style flashing at beginning of animation on iOS Safari (:enter)

[dharders]

I'm submitting a ... (check one with "x")

[x] bug report 

Current behavior

On iOS Safari, the animation :enter transition is briefly showing the end style (flashes) then begins the animation. It animates fine on desktop Chrome though.

Expected behavior

Animation should start from current (or specified) style, then animate to end style (i.e. not jump from end style to start style then animate to end style)

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/P6mr4H?p=preview

Note: You need to test this on iOS Safari to see the bug, as it works as expected on Chrome Desktop. (I tested with iOS 10.2.1)

Click the Grey Button and the bottom blue div should fade in and out. The bug is on the fade in.

Note the top blue div in the plunker is a separate bug on iOS where the end state style does not persist. Not sure if you want a separate github issue for this, or if it is related.

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

Reduce bad animations on mobile.

Please tell us about your environment:

Windows 7, Code, Yarn, ng-cli

• Angular version: 4.2.0-rc-0

• Browser: iOS 10.2.1 Safari and WKWebView

• Language: TypeScript 2.3.2

• Node (for AoT issues): node --version =

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