1742952 - Style set with animation and fill mode forwards not showing in devtools

Status: UNCONFIRMED

(DevTools :: General, enhancement, P3)

Description

[mattiasha]

Attachment: CleanShot 2021-11-25 at [e-mail]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Steps to reproduce:

1. Go to https://codepen.io/emattias/pen/VwzJOBy
2. Click button that runs animation overrides left property styling done with css (same result with inline styles) with fill mode forwards.
3. Inspect the element
4. Devtools will show the styling from the css file (or inline styles) but that element will use the styling set in the animation.

Actual results:

When inspecting the element its not showing the styling that actually takes precedence (the one in the animation).

Expected results:

I would like to see the animation set styling in the style area in devtools above the other styles since its the one that takes precedence (even over inline styles).

This can be confusing and to my knowledge the only case when a style that is used is not shown in the style area when inspecting an element

Comment 1

[mattiasha]

Attachment: CleanShot 2021-11-25 at [e-mail]

You can see the style set by the animation in the computed tab but that is also confusing because it doesnt show where the styling comes from when you expand it to see when the styling comes from.

Comment 2

[mattiasha]

Heres the chrome issue for the same thing: https://bugs.chromium.org/p/chromium/issues/detail?id=1273771

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 4

[Julian Descottes [:jdescottes]]

We don't show any update related to animations or transitions at the moment. Moving to enhancement.