Bug 254401 - Animations inside a Details tag only fire once
Summary: Animations inside a Details tag only fire once
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Antoine Quint
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-03-24 02:39 PDT by Roman Komarov
Modified: 2023-03-24 08:59 PDT (History)
5 users (show)

See Also:


Attachments
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. (2.75 MB, video/quicktime)
2023-03-24 02:39 PDT, Roman Komarov
no flags Details
Test (245 bytes, text/html)
2023-03-24 04:01 PDT, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>