The article is missing the keyframes so it's hard to be sure what's the culprit but for those curious a simple animation like this can consume 12-20% CPU on my computer (chrome v119)
I was thinking that even a higher resolution scaled down animated gif would be better, wasting memory is perhaps better than cpu, but ultimately a bug report/ optimisation request for the Chromium browser would be a big win.
Hardware keeps evolving, yet inefficient software always seems to find ways to catch up to this.
Maybe it depends on the GPU.
Add in to the mix that the rendering is not (usually) being managed explicitly by the implementer and is, instead, being left to browser implementations, along with the issue only being a problem for people that don't have discrete GPUs, and you've got a recipe for real thorn in your side, as far as bugs go.
Rewrite the whole render stack due to a performance issues for a subset of users?
Bifurcate the rendering based on integrated vs discrete GPUs?
Bug the browsers that seem to be mishandling CSS animations on integrated GPUs, and then hope they care?
Not a lot of great options there. But here's to hoping they figure something out! Solving a hard problem feels pretty good, even if it's not appreciated by your full demographic.
Can you give some examples of such chips/laptops? As far as I'm aware Windows requires at least full DirectX 9 compatibility before being able to use hardware acceleration for it's composited desktop.
This isn't exactly a new machine either, wonder if it's falling back to CPU rendering in your configuration.