[Webkit-unassigned] [Bug 254585] overriding style has no effect until original style is deactivated/unchecked in web inspector

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=254585

--- Comment #4 from Razvan Caliman <rcaliman at apple.com> ---
Thank you for filing this issue, Matt!

I did quick investigation. The panel doesn't stay visible because the end state of the animation defined by `@keyframes polyglot__envelope` gets overridden by the initial property which is marked with !important: 

```
#polyglot__panel {
   transform: scale(0) !important;
...
   animation: polyglot__envelope 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
              forwards !important;
}

@keyframes polyglot__envelope {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
```

That is indeed a regression. I tested in Safari 15.1 and the attached test case [1] does work there while it fails in Safari 16.4.

I'm confused about the Web Inspector aspect of this.

How does the "User CSS" you describe in step 2 end up in the document?

>2. User CSS sets overriding styles

>#polyglot__panel {
>	transform: scale(1,1) !important;
>}


I looked into the public source of https://github.com/uetchy/Polyglot and can't see where this happens.

I manually added a stylesheet to the sample test case (commented-out in the source) and Web Inspector does list the correct order of overridden styles.

How can I get into the same state you're testing?


[1] https://bug-254585-attachments.webkit.org/attachment.cgi?id=465655

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230329/0ae54929/attachment.htm>