Bug 267511 – Severely degraded performance and graphic artifacts when animating several pseudo-elements with background: url() attribute

• Status: RESOLVED
• Resolution: INVALID
• Component: Animations

Created attachment 469397 [details]
video demonstration of the bug and workaround

changing "background" to "background-image" fixes the issue.

you can replicate the problem in this sample by pressing the plush on right to start animations: https://bd86ba65.wukko.pages.dev/

i was able to reproduce the bug in:
- Safari for macOS (Version 17.2.1 (19617.1.17.11.12))
- Safari for iOS 17.2.1 (21C66)

lagginess and artefacts aren't present in:
- Firefox release 121.0.1.
- Arc 1.25.1 (45028) (Chromium 120.0.6099.216).

i've attached a video demonstration of the issue (and how background-image fixes it).

[Antoine Quint]

I don't see the performance degradation, may I ask what macOS hardware you are using?

[Antoine Quint]

Also, could you also provide a version with good performance? Just to be sure I'm comparing the right things.

[Alexey Proskuryakov]

I also cannot reproduce (M3 Mac, with a newer WebKit than in the report).

Just found out that this is caused by the AdGuard extension as disabling it fixes the issue, sorry for confusion. Enabling just the "general" part of AdGuard extension (with default filters) leads to choppy performance.

If it's still something you wanna look into, here's a version with background-image that doesn't cause any problems: https://dd272edc.wukko.pages.dev/

I'm using 2020 MacBook Pro with M1 chip.

[Antoine Quint]

I think we can close this. Thanks for the report!