REGRESSION (Safari 16.5): Element left in blurred state after animation

• Component: Animations
• Status: NEW ---

[Matt Sephton]

Created attachment 466414 [details]
screen recording of the issue, with workaround

I am seeing a CSS element animate in but it is left in a blurry state.

However, if I do certain things that cause the page to redraw then it finally appears as it should.

I can move the mouse a certain way, scroll the page, or use the web inspector.

If I apply `animation: none !important` to the element `#polyglot__panel` then the issue goes away.

The CSS is inside the Polyglot App Extension https://apps.apple.com/gb/app/polyglot/id1471801525?mt=12
- install and run the app
- check "instant translation" box
- go to safari
- activate extension
- goto page https://github.com/uetchy/Polyglot/issues/128
- select some text by double clicking
- do not move the mouse afterwards 
- translation popup panel will appear, blurred
- scroll page, panel will unblur

Attached is a screen recording.

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

[Matt Sephton]

Created attachment 466415 [details]
screenshot of the element in blurred state after animation

[Matt Sephton]

visible with
- Safari 16.5 on macOS 13.4 Ventura
- Safari 16.5 on macOS 12.6.6 Monterey
- Safari Tech Preview 170 on macOS 12.6.6 Monterey

it was not visible in
- Safari 16.4 on macOS 12.6.6 Monterey

[Antoine Quint]

Retitling as a Safari 16.5 regression per latest comment by Matt.

[Radar WebKit Bug Importer]

<rdar://problem/109666580>

[Antoine Quint]

I'm not managing to get the popover to appear at all on the macOS 13.5 beta. I do see the panel added to the DOM, but it's not visible. If I comment out the `transform: scale(0) !important;` then I see the panel appear and animate without issue, with no blurring.

[Matt Sephton]

Yes, that's the result of a recent bug fix in WebKit. See #254585

You'll need to install the workaround below. Apologies for not mentioning that.

This is not included in the extension (author is suspected to have died) so needs to be added through Safari > Advanced > Style sheet

```
div#polyglot__panel {
	transform: scale(1) !important; /* for Safari 16.4 issue */
}
```

[Antoine Quint]

(In reply to Matt Sephton from comment #6)
> Yes, that's the result of a recent bug fix in WebKit. See #254585
> 
> You'll need to install the workaround below. Apologies for not mentioning
> that.
> 
> This is not included in the extension (author is suspected to have died) so
> needs to be added through Safari > Advanced > Style sheet
> 
> ```
> div#polyglot__panel {
> 	transform: scale(1) !important; /* for Safari 16.4 issue */
> }
> ```

With that additional stylesheet, I get what I assume is the expected behavior and not seeing any blur anywhere.

[Antoine Quint]

(In reply to Antoine Quint from comment #7)
> With that additional stylesheet, I get what I assume is the expected
> behavior and not seeing any blur anywhere.

With both Safari in macOS 13.5 beta and STP 170.

[Matt Sephton]

You can see me repro it in my screen recording.

But, yes, it only happens sometimes and I'm not sure what is triggering the faulty state.

I'll see if I can find other reproduce steps.

[Matt Sephton]

I'm away from my macOS 13 install.

But I get it immediately using Safari TP 170 on macOS 12.6.6.

Attaching new screen recording.

[Matt Sephton]

Created attachment 466479 [details]
Safari TP 170 (Safari 16.4, WebKit 17616.1.14.5) on macOS 12.6.6

[Matt Sephton]

One of the other effects of this is that on the upload attachment page, the process seemed to have not finished because the page did not update. 

But I could see the upload had finished thanks to my network traffic.

As soon as I scrolled the page the display refreshed at this page.

[Matt Sephton]

Safari TP Release 171 (Safari 16.4, WebKit 17616.1.15) on macOS 12.6.6 (21G646)
- still happening


To aid reproduction as detailed in my initial report, please make sure you are accessing the page inquisition as there it reproduces first time every time (other pages may take more effort to trigger)