Bug 208595

Summary:

Popsicle animation does not match rendering in either Firefox or Chrome

Product:

WebKit

Reporter:

Naman Goel <naman34>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, graouts, graouts, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

Mac

OS:

macOS 10.15

URL:

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

Attachments:

Description	Flags
Screen recording from Safari	none
Screen Recording from Chrome	none

Description Naman Goel 2020-03-04 13:22:54 PST

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.

Comment 1 Naman Goel 2020-03-04 13:26:41 PST

Created attachment 392468 [details]
Screen Recording from Chrome

Comment 2 Naman Goel 2020-03-04 13:30:43 PST

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.

Comment 3 Naman Goel 2020-03-04 13:33:00 PST

Another update:

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

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

Comment 4 Naman Goel 2020-03-04 14:02:38 PST

Another example that shows animation problems in Safari:

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

Comment 5 Antoine Quint 2020-03-05 00:44:22 PST

(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.

Comment 6 Radar WebKit Bug Importer 2020-03-05 10:20:39 PST

<rdar://problem/60089094>

Comment 7 Radar WebKit Bug Importer 2020-03-05 10:20:54 PST

<rdar://problem/60089113>

Comment 8 Antoine Quint 2020-04-15 13:42:16 PDT

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.

Comment 9 Antoine Quint 2020-04-15 13:44:38 PDT

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

Comment 10 Antoine Quint 2020-04-15 13:51:19 PDT

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).

Comment 11 Naman Goel 2020-04-18 13:48:07 PDT

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