Safari Animator.immediate bug

[illyas3]

Problem

When using Animator.immediate in Safari Mac OS, the animation doesn't happen. In the debug, there is a history of events, animation is created in the DOM, but does not render.

Problem occurs only in Safari (tested in Safari 11.0.1, Safari 12.1), while other browsers work okay.

Reproduce

Example 1 (elm + animator)

1. Open Ellie in Safari on Mac OS.
2. Click on the box.
   Expected behaviour: box goes back and forth on clicks.
   Wrong behaviour: box stays at the same place.

Example 2 (html, css only)

Link: jsFiddle

• In Safari object stays in the coordinates 0, 0, 0
• In other browsers in is in 0, 100, 0
• If we change animation-duration: 0ms; to animation-duration: 1ms;, Safari renders it correctly, as all other browsers (at 0, 100, 0).

Additional info

• Quick work around can be setting Animate.millis 1, which is pretty much the same, but produces animation-duration: 1ms in the css. This works, if you have only 1 animating object.
• However, this fix does not address another scenario: If you are animating 2 or more objects (within the same Animator), and only first objects changes, the second object also changed (gets new Class + Keyframes). Class and Keyframes changes occur on all the objects within same Animator. And while for the first you can set Animate.millis 1 the second will automatically get animation-duration: 0ms, which will cause Safari to break animation of second object.

Working solution is to use different Animator for each animation, but then you have to have Tick Msg, Animator and subscription for each. Which is kinda against philosophy outlined in original announcement The Successor to Elm Style Animation.