1627101 - Computed style shows style of random moment in animation

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[flip101]

Attachment: kazam_q7chy5a5.movie.mkv

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

Website: https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/examples/checkout/

Actual results:

https://streamable.com/hud4l8

Expected results:

Showing the style of when the transformation is finished.

OR updating the style continuously so that you can see the values change in real time (when the animation is running)

Comment 1

[Clara Guerrero ( Need Info Brindusa Tot Please)]

Hi,

Thanks for the details. I was able to reproduce on ubuntu 18.0, on the following versions

Firefox Nightly 77.0a1 (2020-04-07) (64-bit)
Beta 76.0b1 (64-bit)
Release 75.0 (64-bit)

I will move this over to a component so developers can take a look over it. If is not the correct component please feel free to change it to an appropriate one.

Thanks for the report.

Best regards, Clara.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

To be clear this is about the devtools inspector, right? You're not seeing weird stuff in getComputedStyle itself.

Comment 3

[flip101]

Yes it's about devtools inspector. I didn't check javascript getComputedStyle, maybe it also has weird behavior.

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: bug.mp4

Indeed, the Computed panel shows a snapshot of the element's styles at a given position. It does not update over the progression of an animation or transition.

Steps to reproduce:

• Run the following in the address bar of a new tab:

data:text/html,<style>input{transition: border-width 1s; border-width: 1px} input:focus {border-width: 10px}</style><input>

• Open DevTools and Inspect the <input>
• Enable 3-pane mode so you can see the Rules view and the Computed view at the same time
• In the Rules view, toggle the :focus pseduo-class

Observe the changes to the border-width property in the Compute view as you toggle :focus.

Comment 5

[Razvan Caliman [:rcaliman]]

Indeed, the Computed panel shows a snapshot of the element's styles at a given position. It does not update over the progression of an animation or transition.

Steps to reproduce:

• Run the following in the address bar of a new tab:

data:text/html,<style>input{transition: border-width 1s; border-width: 1px} input:focus {border-width: 10px}</style><input>

• Open DevTools and Inspect the <input>
• Enable 3-pane mode so you can see the Rules view and the Computed view at the same time
• In the Rules view, toggle the :focus pseduo-class

Observe the changes to the border-width property in the Compute view as you toggle :focus.

Comment 6

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)