Bug 208595 – Popsicle animation does not match rendering in either Firefox or Chrome

• Component: Animations
• Status: NEW

[Naman Goel]

Created attachment 392466 [details]
Screen recording from Safari

TLDR;
=====

If you transition multiple elements at the same time, occasionally the transitions won't play at the same time and get staggered instead.

To Reproduce:
-------------
https://codepen.io/picks/pens/

There is a carousel on this link and if you try to click the arrow buttons a few times you will notice that the animation go out of sync.

It is also possible to notice the same bug if you make a grid of divs and apply a transition to all the divs where they all have a staggered delay.

Ask me to add a code example, and I will.

Attachments:
------------

I'm attaching a video from Safari.
Notice how Safari chooses to play the transitions out of sync.
This might have been an intentional decision to keep animations from dropping frames in Webkit, but keep the timing/duration is more important in practice.

[Naman Goel]

Created attachment 392468 [details]
Screen Recording from Chrome

[Naman Goel]

Further investigation shows that the problem is much better in new versions of Safari.

A previous version of safari would've choked on this, but now it works smoothly:
https://codepen.io/colinkeany/pen/RJXOqM

This leads me to think that iframes and videos specifically cause animations to jank.

[Naman Goel]

Another update:

https://codepen.io/colinkeany/pen/RJXOqM

The animations do eventually go slightly out of sync, but the deviation is small.

[Naman Goel]

Another example that shows animation problems in Safari:

https://codepen.io/tiggr/pen/mdJmaMr

[Antoine Quint]

(In reply to Naman Goel from comment #2)
> Further investigation shows that the problem is much better in new versions
> of Safari.

Which versions of Safari / macOS in particular are you comparing? Have you looked at recent Safari Technology Preview builds and/or macOS 10.15.4 betas as well? We have switched to a new animation engine based on the Web Animations specification recently.

[Radar WebKit Bug Importer]

<rdar://problem/60089094>

[Radar WebKit Bug Importer]

<rdar://problem/60089113>

[Antoine Quint]

So that last test case shows an animation issue where the three colored parts that eventually melt don't quite grow as expected: https://codepen.io/tiggr/pen/mdJmaMr.

However, I'm not seeing obvious issues with previous reported links. So I think we'll keep this bug about https://codepen.io/tiggr/pen/mdJmaMr.

Naman Goel, thanks for filing this. Please raise individual bugs when you find an issue, it makes things easier to track.

[Antoine Quint]

There's also a delay for the melting drops that we don't seem to be respecting.

[Antoine Quint]

Retitling to match the work tracked for this bug. Note that neither Safari nor Firefox nor Chrome have the same behavior here. I believe the intended behavior is the one from Chrome, though it remains to be seen if it's compliant (though I gather it is).

[Naman Goel]

The popsicle example is the most egregious. The other bugs don’t happen consistently anyway.