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

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Mar 29 01:44:08 PDT 2023


--- 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>

More information about the webkit-unassigned mailing list