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 remember that a trick for improving CSS animation performance was to explicitly add a 3D transform, as that would force the browser to use hardware acceleration. Could you give that a try? https://stackoverflow.com/questions/13176746/css-keyframe-an...
I feel like the article / author is perhaps attacked for missing key front end concepts such as square/circle (if I got that right, it's been years since I touched front end), but the premise still stands - which is exactly what you and gp says: A simple UI element shouldn't waste resources like this.
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.
That's where my money's at. Usually if you have a rendering error in an otherwise competent product, it's due to it being programmed for a different domain. Here, the CPU and GPU have such different types of work units that structuring for GPU efficiency often means making poor structures for CPU efficiency. Said another way: writing it to be performant on the GPU usually means the data would be hard to work on quickly with a CPU.
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.
Integrated GPUs are not necessarily a problem today, newer ones are very fast (for web rendering), have few bugs, and support all APIs (DX 12, Vulkan, video decoding/encoding)
Sorry, you're right, I meant "integrated graphics". Those (often laptop) chips that don't have real GPUs with SOCs, or whatever, but just have some helper commands/functions for common graphic processing tasks. Basically, the kinds of chips that only do linear (threaded) processing, even if it's on rendering functions.
I'm not aware of any "integrated graphics" which is not also a full GPU. Unless you talk about 15 year old laptops.
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.
I've just tried this in the latest Firefox 119 & Chromium 118 and the CodePen registers as 'idle' in the browser task manager and I can't see any difference in `top`. When it does register it's usually at ~0.001%.
This isn't exactly a new machine either, wonder if it's falling back to CPU rendering in your configuration.