Canvas on website has rendering artifacts that worsen over time

[Psychpsyo]

Summary

Letting the background at https://vaie.art/pudle/ animate for a few minutes leads to it building up more and more intense rendering artifacts.

Operating system

Linux

Steps to reproduce

1. Go to https://vaie.art/pudle/
2. Guess some word for the background to show up
3. Wait and watch it deteriorate

Expected behavior

The animation should stay smooth, as it does in other browsers.

Actual behavior

The background becomes very... choppy? See attached video.

URL for a reduced test case

https://vaie.art/pudle/

HTML/SVG/etc. source for a reduced test case

N/A

Log output and (if possible) backtrace

none

Screenshots or screen recordings

Left: Ladybird
Right: Firefox

Screencast_20251110_181056.webm

Build flags or config settings

none

Contribute a patch?

• I’ll contribute a patch for this myself.

[rcorsi]

What environment are you on? WSL or a VM or real HW?

[Psychpsyo]

What environment are you on? WSL or a VM or real HW?

Real hardware.

[rcorsi]

I just tried to reproduce on real hardware Intel i7 8700T using CPU integrated graphic processor on Ubuntu 25.04. I didn't see the issue. I was on the commit just before the one that crashes Ladybird in #6870

Which Linux distribution are you on?
Which discrete graphics card or integrated graphics processor are you using?
What do you do, just make a guess or two and then let the time run out so that the entire stack fills?
At what point does the problem start or become obvious?

[rcorsi]

One thing I noticed is that the fonts in my setup were much closer to the Firefox version that you have as an example. The ones from your Ladybird example looked very simple, maybe try again at commit 911ecf1