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
Created attachment 466415 [details] screenshot of the element in blurred state after animation
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
Retitling as a Safari 16.5 regression per latest comment by Matt.
<rdar://problem/109666580>
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.
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 */ } ```
(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.
(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.
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.
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.
Created attachment 466479 [details] Safari TP 170 (Safari 16.4, WebKit 17616.1.14.5) on macOS 12.6.6
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.
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)