Bug 254590 – REGRESSION (Safari 16.4): Behavior of transform:scale(0), Polyglot extension popup disappears

• Status: NEW
• Component: CSS

[Matt Sephton]

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

[Matt Sephton]

Safari Extension I was referring to: https://github.com/uetchy/Polyglot

[Matt Sephton]

My current workaround is to put the following in a user stylesheet:

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

[Alexey Proskuryakov]

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?

[Matt Sephton]

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

[Radar WebKit Bug Importer]

<rdar://problem/107371143>

[Razvan Caliman]

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.