Bug 233877

Summary:

Applies css transition when doing `.cancel()` on js animated element

Product:

WebKit

Reporter:

mattiasha

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

dino, graouts, graouts, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
reproduction	none

Description mattiasha 2021-12-06 08:02:40 PST

Created attachment 446039 [details]
reproduction

Steps to reproduce:

I have attached a screencast of this:

1. Go to https://codepen.io/emattias/pen/NWaxYrp?editors=0110
2. Press "toggle start animation button"
3. See the leftmost column animate in without a problem
4. Press "css transition on" button
5. Press "toggle start animation button" again
6. See that it will apply the transition set in the css when the javascript animation is cancelled (with .cancel() method)

I can reproduce this in the latest firefox and safari versions but not in chrome. I think the way chrome handles it (not applying css transition) is what I prefer and expect to happen (since the width has not changed).

Comment 1 Radar WebKit Bug Importer 2021-12-13 08:03:22 PST

<rdar://problem/86412069>

Comment 2 Antoine Quint 2021-12-13 10:23:25 PST

Have you also filed a bug on Chromium? I haven't looked into whether Chromium was right and Firefox+Safari was wrong, but given they are the only engine with a different implementation, it would be good to get their take on this as well.

Comment 3 mattiasha 2021-12-14 01:12:30 PST

I created a chromium bug for this here: https://bugs.chromium.org/p/chromium/issues/detail?id=1279736