In this Safari Extension, for the past 6 years we have been using: Previously ``` #polyglot__panel { transform: scale(0) !important; } ``` which, regardless of whether it is considered correct or not, had no effect and the element displayed fine. Q: is this change in behaviour to be expected? If I try to override this CSS, there is a different problem: overridding style has no effect until original style is deactivated/unchecked in web inspector https://bugs.webkit.org/show_bug.cgi?id=254585
Safari Extension I was referring to: https://github.com/uetchy/Polyglot
My current workaround is to put the following in a user stylesheet: ``` #polyglot__panel { transform: scale(1) !important; } ```
Thank you for the report! Could you please clarify what was the last version where you saw this work, and what is the first one where it doesn't? If you can add more detailed steps to reproduce, that would be appreciated too. I take it that installing Polyglot is step 1, but what is the most obvious symptom of the problem then?
It was working in Safari 16.3 (I am using macOS 12.6.3) It was reported broken by a user of an Extension in a Safari 16.4 beta (not sure if installed separately or as part of a macOS beta) https://github.com/uetchy/Polyglot/issues/128 It was confirmed by my as not working in Safari 16.4 (I am using macOS 12.6.4) Some more discussion at a different/related issue, please look at this: https://bugs.webkit.org/show_bug.cgi?id=254585
<rdar://problem/107371143>
Copying over some notes from Bug 254585 which is related to this one: This has been progressed in Safari 16.4, not regressed. The issue with the disappearing popup is caused by the animation of a property marked `!important`. Simplified test case extracted from: https://github.com/uetchy/Polyglot/blob/master/PolyglotSafariExtension/ContentScript/content.css ``` #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); } } ``` The animation fill mode `forwards` isn't kept. The style that wins at the end is `transform: scale(0) !important;`. This is intentional. Therefore, the panel disappears because it scales back to zero right after the animation ends. The animation itself should not run at all. This is being addressed in Bug 254665. It is a fix to bring WebKit in line with the intended spec behavior which is respected by other browser engines. See also Bug 252481. The fact that this worked in previous Safari versions was itself a bug. --- The issue with Web Inspector not reflecting the correct applied styles is valid and tracked in Bug 254585.