[Svelte Flow] On WebKitGTK CSS animations blurry the whole app

[lucascompython]

Describe the Bug

In WebKitGTK when a css animation is playing (atleast on the node) the whole website gets blurry.

Your Example Website or App

Not mine, but the bug also happens here, and my app has similar styles. https://svelteflow.dev/examples/styling/turbo-flow

Steps to Reproduce the Bug or Issue

.

Expected behavior

As a user I expect the website to not be blurry when a css animation is playing.

Screenshots or Videos

demo.mp4

Platform

• OS: [Linux]
• Browser: [Epiphany, webkit2gtk-4.1, webkitgtk-6.0]
• Version: [Epiphany 45.3]

Additional context

I've also tested a simple css transition and during the transition, the whole app gets blurry.

[peterkogo]

I believe this has something to do with Webkit2GTK and subpixel rendering. There are a couple of hacks around how to prevent this but afaik its very system dependent. I currently don't have a linux machine I could easily test this on - any help would be appreciated to see if any of the hacks work :)

[lucascompython]

Unfortunately none of the "hacks" fixed the issue.