Cross-browser issues in reversing animations

[Martin-Pitt]

I'm trying to make full use of the Web Animations API and therefore am pushing the boundaries of this polyfill.

I have been having some issues with reversing animations. The relevant website is: https://choreography.io/ Click on the first blue tile for the transitionary animation. When you press the 'back' button in the top left of the website it will play the same animation but by reversing it. (You can also use Previous/Next browser history navigation)

• Firefox handles it best, no issues observed, you may use this as reference
• Safari there is a render glitch, where the first frame will be visible before playing the full animation smoothly
• Chrome will glitch out the most, a lot of the fade out animations aren't observing 'fill: both' correctly. For example the header will be visible throughout the animation until its' relevant timeline kicks in

The same behaviour is observed in their mobile versions. (Apart from ios chrome which uses webkit obviously and therefore exhibits the first-frame render glitch of Safari)

This is how the library kicks in the reverse animation:

var player = document.timeline.play(animation);

if(isReverse)
{
    player.currentTime = player.effect.activeDuration;
    player.reverse();
}

Additionally, is the above the correct usage to reverse an animation?

Previously I had only used player.reverse(); in the older version of the polyfill and that worked fine (as per spec I read). But the newest version of the polyfill did not play the animation anymore unless I set the currentTime to the end first

[shans]

We'd like to look into this further but we really need a minimal repro so we can see what's going on (we weren't able to reproduce the problem ourselves). Any chance you'd be able to provide one?

[Martin-Pitt]

I tried to build a minimum repro from scratch but couldn't replicate the issue. I'll try keep building it up until it triggers but that's going to take a while.

[Martin-Pitt]

It feels like it is very sensitive to performance and timing.

When I use the Animation panel in DevTools to slow down animations globally to less than x1.0 speed, the glitch doesn't trigger and the animation plays in reverse really smoothly.

I'm on a MacBook Air (13-inch, Mid 2013), OSX 10.10 using latest stable and latest canary of Google Chrome.

[Martin-Pitt]

Here is a capture in a timeline for context:

[Martin-Pitt]

Is this because negative playbackRate is not working correctly as per https://github.com/web-animations/web-animations-next/issues/370 ?

[Martin-Pitt]

@shans, I hadn't been able to build a minimal repro and had closed issue in frustration.

It might be that multiple factors come into play, such as complexity of the animation causing subtle effects in order of rendering frames queueing up all at once and the behaviours of the polyfill of which I have no idea of.

For posterity I have preserved the old design over at: https://choreography.io/old/

Although the animation plays back in reverse now but only because I had gone through several iterations of different ways to play back animations in reverse (quite interesting that there are multiple ways to do this), until I came up with a ugly hack: https://github.com/choreography/choreography/commit/439edf5f31cbb2843101e3dbd308378e58a121a7#diff-8d66ba90fc6b31cea517dad400730a01R189