Bug 254401

Summary:

Animations inside a Details tag only fire once

Product:

WebKit

Reporter:

Roman Komarov <kizmarh>

Component:

Animations

Assignee:

Antoine Quint <graouts>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

dino, graouts, graouts, koivisto, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://github.com/web-platform-tests/wpt/pull/39183

Attachments:

Description	Flags
Video recording of the CodePen link demonstrating the bug: expanding the details only fires the animation once, while showing/hiding an element via a checkbox fires it every time.	none
Test	none

Description Roman Komarov 2023-03-24 02:39:35 PDT

Created attachment 465567 [details]
Video recording of the CodePen link demonstrating the bug: expanding the details only fires the animation once, while showing/hiding an element via a checkbox fires it every time.

Steps to reproduce:

1. Create a `<details>` tag.
2. Put an element inside that has an animation that runs once.
3. Expand the details, close it, expand again.

Codepen link: https://codepen.io/kizu/pen/XWPopdM

When there is an element with an animation inside the details, it works only the first time we expand the details, but does not work on any consecutive toggling.

This is an issue that would prevent us from using animations of transitions for the details content — with the new discrete display animations (https://github.com/w3c/csswg-drafts/issues/6429), as well as with the initial state transitions (https://github.com/w3c/csswg-drafts/issues/8174), it would be really nice to use them with `<details>`, but this bug prevents us from it.

Checked in other browsers: Chrome has the same issue (I did file it there as well — https://bugs.chromium.org/p/chromium/issues/detail?id=1427375), while Firefox seem to work as I expect it to.

Comment 1 Antoine Quint 2023-03-24 04:01:11 PDT

Created attachment 465568 [details]
Test

Comment 2 Antoine Quint 2023-03-24 06:19:47 PDT

We start off by calling RenderTreeUpdater::tearDownRenderers() with the root set to the HTMLSlotElement and TeardownType::Full. As we process the slot's children we don't call cancelDeclarativeAnimations() because of the teardownType.

Comment 3 Antoine Quint 2023-03-24 06:26:19 PDT

Then we call RenderTreeUpdater::tearDownRenderers() with the root set to the HTMLDetailElement and TeardownType::RendererUpdate. The <div> is not part of the teardownStack.

Comment 4 Antoine Quint 2023-03-24 06:28:50 PDT

Then we call RenderTreeUpdater::tearDownRenderers() again with the HTMLSlotElement but this time with TeardownType::RendererUpdate.

Comment 5 Antoine Quint 2023-03-24 07:34:51 PDT

Pull request: https://github.com/WebKit/WebKit/pull/11923

Comment 6 Antoine Quint 2023-03-24 07:38:17 PDT

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39183

Comment 7 EWS 2023-03-24 08:58:01 PDT

Committed 262076@main (46d858959377): <https://commits.webkit.org/262076@main>

Reviewed commits have been landed. Closing PR #11923 and removing active labels.

Comment 8 Radar WebKit Bug Importer 2023-03-24 08:59:15 PDT

<rdar://problem/107188584>