> One thing that is remarkable, the icon is displaying a circle, but the icon image is really a square with transparent corners (inside a div container that is a rectangle).
…Yes. Ever seen an image file with circular dimensions? No, because digital images (at least in standard formats) are always rectangles, sometimes with transparent areas that make them to appear to be other shapes.
There are so many shockingly basic misunderstandings in this post.
Another thing is that they’re saying the animation is causing the entire page to reflow because it’s a square rotating out of bounds
My understanding is that transforms can’t cause reflows because they occur in the compositing layer. And as a sibling comment points out: everything round in css is actually a rectangle. Unless it’s a path drawn in an svg element. But then that lives in a rectangular frame. You could animate it with svg, though.
Regardless, I want to say I reject the premise here. I’m not sure why a transform would be so inefficient. I have a feeling it could be something else at work here.
I’m trying to think about what the authors unspoken “better approach” could’ve been, because I’m with you—that doesn’t strike me as remarkable at all, it seems like it’s the way things have always been.
Maybe they were trying to argue that for something as simple as that, it could’ve been a div with a background and a font icon, and used CSS to make the div into a circle, and rotate that? It certainly seems more complicated at a glance, but I’m not a frontend dev, so, who knows?
This is confusing. The author could explain what should be done instead.
Even if it was an svg drawing a circle, the render engine will treat as it was a square because of the canvas, which is always an square.
In fact rotating an element can overlap bounds, forcing to redraw all the elements around it, causing an extra work. That could easily be solved with an format with animation support (gif, svg, av1, webm...)
Sort of off-topic but I see a lot of round screens in sci-fi and especially retrofuturistic settings and that always wonder if there could be an alternate reality where they took off instead of rectangular monitors. After all for CRTs they were in some ways more optimal!
I dream of a polar-punk alternate reality where we address pixels not by (x, y) but by (r, θ).
Of course there's one big flaw with this line of thinking: even if we used circular (or elliptic) screens, we can't tile them with other circles. Circular windows would waste a lot of space. Maybe we could split in "slices" instead though?
> …Yes. Ever seen an image file with circular dimensions?
The browser isn't displaying a file, it is displaying data mapped to a rectangle. It is 2023 you should be able to spend some polygons on those shapes.
Strange to see this, as the animation should NOT trigger a layout recalculation (transform is done on it's own "layer", is GPU accelerated and that's why it's more performant).
The article mentions "The computer is doing a lot more work and recomputing the layout of the entire page.", but it's not true. As you see in his example, the square image is getting rotated but layout of the table does not change (the image clips out the table), so no layout recalculation is done.
This has nothing to do with the circle. Rendering animations in Chromium really is just that expensive.
VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium.
This is a great example of basic functionality regressing due to the bloat of modern technology stacks.
Blinking cursors have existed since the original IBM PC and before. Yet for some reason, now a blinking cursor is a problem that causes CPU spikes on modern gigahertz level machines.
I don't trust this article. Rotation of elements in CSS doesn't cause a reflow of the page, since it's a transform property, and so it doesn't cause a re-render like the article says.
The article is wrong but the observations are correct. The codepen link posted somewhere downthread does result in usually high cpu usage (Chrome M2 Mac).
Rotation of elements in CSS shouldn't cause a reflow of the page. But the devil is in the details and sometimes, with a deeply complicated declarative API for plotting content on screen, It's easy for the developers working on the browser's rendering layer to inadvertently forget to do the correct thing in favor of the safe thing (ie if recalculating the layout ends up being the identity function, will testing actually pick up that the recalculation was in fact unnecessary or off spec?).
I have definitely in the past chased around a massive repaint bug that only showed up in Firefox using flex boxes (only to have it vanish at the next minor revision).
Since this performance hit is showing up in Chrome, it will be interesting to see if it is a Chrome specific issue or a webkit issue.
Sorry about that. It's a wordpress website on the official wordpress.com hosting, it's actually wordpress that is doing all this tracking out-of-the-box.
I like his article claiming that the Costco website in the UK does not and has never worked at all, where there's people in the comments saying "it works fine".
If a major website doesn't work for me, and it's not a one-time thing, I tend to assume the problem might be on my end and troubleshoot from there instead of writing an article about how it's amazing that nobody else has ever noticed that it's been down forever.
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'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.
CSS animations are a resource hog and I avoid having continuously running animations for this reason. For one site I wanted to have a background gradient slowly shift colors over time in an infinite loop but my laptop fan kept spinning on the page and the cpu usage was high so I scraped it.
'''In a real world app that is responsive and highly dynamic, like BitBucket, the page is usually adjusted to fit content, neighboring elements get pushed out to fit the rotating image, then neighboring and parents elements get adjusted too… the layout of the entire page is redone on every frame because of the rotating image.'''
transform translations doesn't make the browser recalculate the layout for neighbour elements
People complain a lot about Jira, but Bitbucket is legitimately shitty. Bitbucket lacks tons of features. If you try to integrate it with another product, typically features don't work for Bitbucket, where they'll work for GitHub or GitLab. It only recently, after something like 7 years, gained the ability to pass a secret in a webhook. Group/Org level permissions for certain project properties are apparently not exposed by their OAuth API. Adding repo deploy keys and permissions to integrated products requires manual intervention. The Markdown parser is buggy, the UX is annoying and less useful than their competitors, feature requests go unanswered.
It's bizarrely been on life support forever. Atlassian doesn't seem to want to invest in it, despite the fact that the hosted VCS landscape isn't that big, and they've had a huge opportunity to steal business by converting GitHub Enterprise customers to a Bitbucket offering with cheaper deals from bundling with other Atlassian products. Despite all this, there isn't a single solitary reason to adopt Bitbucket, unless using GitHub and GitLab are forbidden.
We stay on Bitbucket because we don't want to invest the money and time it'll take to move off. But we know that we will move eventually, because the competition is just better in every way. I can't say that about the rest of Atlassian's products.
It’s explained in the article: the image is a square (even though it looks like a circle), rotating a square cannot be done in place, it’ll shift the layout as it rotates, provoking a new paint of the entire page on each animation frame.
This is how the author explains it, but it sounds suspicious to me, I’m not sure a CSS animate rotation would cause shifts in that case.
Work at a large company. Lots of non-technical people fall under IT.
Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay.
It was installed by the DevOps team on all the VM's in Azure. Many, many people reported that their machines were now using 100% CPU, or 1 of their multiple CPUs were pegged by a defender process. This isn't uncommon.
Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.
o Give me flamegraphs of all the computing resources a given web page is using; CPU, processes, threads, fibers, specific methods/procedures/functions inside of the Browser... also, be able to selectively disable and keep disabled, on a granular level (by web page/URL) things that use resources beyond a certain amount, for example, in the article's case, a buggy animation -- but more generically any resource or browser process or sub-process that is taking too much CPU time and/or other computing resources (RAM, I/O, Network, GPU etc.)...
(Yes, including those "power user" features could lead to the selective reduction of functionality for some web pages -- but the user should always be able to determine exactly what they want and what they don't want from any given web page...)
I fixed a bug like this in online-go.com once. The "unread notification" bubble had an almost indiscernible infinite animation at 60fps and the website would start killing my Thinkpad every time it was showing. It felt so good to track down and fix it.
I remember how this used to be a common problem with web ads in the mid 2000s.
One of the reasons why I loved Chrome when it came out was that the multi-process architecture made it easy to kill a Chrome process without closing all my open tabs: The offending tag would "crash," but otherwise I could continue browsing.
Also, around that time there was an ad on Slashdot that gobbled CPU. I remember quickly figuring out that it was the ad, grabbing a screenshot, and emailing them. I got back a quick knowledgeable reply (and apology).
I like rooting for an underdog. We use GitLab instead of GitHub. Partly for that, and partly because the CEO saw I mentioned a problem here, and helped fix it.
[+] [-] rafram|2 years ago|reply
…Yes. Ever seen an image file with circular dimensions? No, because digital images (at least in standard formats) are always rectangles, sometimes with transparent areas that make them to appear to be other shapes.
There are so many shockingly basic misunderstandings in this post.
[+] [-] steve_adams_86|2 years ago|reply
My understanding is that transforms can’t cause reflows because they occur in the compositing layer. And as a sibling comment points out: everything round in css is actually a rectangle. Unless it’s a path drawn in an svg element. But then that lives in a rectangular frame. You could animate it with svg, though.
Regardless, I want to say I reject the premise here. I’m not sure why a transform would be so inefficient. I have a feeling it could be something else at work here.
[+] [-] ChoGGi|2 years ago|reply
https://news.ycombinator.com/item?id=38260935
[+] [-] jonwest|2 years ago|reply
Maybe they were trying to argue that for something as simple as that, it could’ve been a div with a background and a font icon, and used CSS to make the div into a circle, and rotate that? It certainly seems more complicated at a glance, but I’m not a frontend dev, so, who knows?
[+] [-] yrds96|2 years ago|reply
[+] [-] simias|2 years ago|reply
I dream of a polar-punk alternate reality where we address pixels not by (x, y) but by (r, θ).
Of course there's one big flaw with this line of thinking: even if we used circular (or elliptic) screens, we can't tile them with other circles. Circular windows would waste a lot of space. Maybe we could split in "slices" instead though?
[+] [-] josefx|2 years ago|reply
The browser isn't displaying a file, it is displaying data mapped to a rectangle. It is 2023 you should be able to spend some polygons on those shapes.
[+] [-] justsomehnguy|2 years ago|reply
>> A circle can be rotated in place. It doesn’t take more space than the initial circle. *A square cannot.*
Edit: and just in case you or someone else miss the forest again:
the site developer treats the image as a circle, assuming rotating the image would change only the image.
[+] [-] ioulian|2 years ago|reply
The article mentions "The computer is doing a lot more work and recomputing the layout of the entire page.", but it's not true. As you see in his example, the square image is getting rotated but layout of the table does not change (the image clips out the table), so no layout recalculation is done.
So the "bug", must be somewhere else?
[+] [-] dumbo-octopus|2 years ago|reply
VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium.
https://github.com/microsoft/vscode/issues/138396
https://github.com/microsoft/vscode/issues/22900
If anyone does know a fix, you could save the developer community about a metric ton of battery life hours worldwide if you share it with the above :)
[+] [-] Jeema101|2 years ago|reply
Blinking cursors have existed since the original IBM PC and before. Yet for some reason, now a blinking cursor is a problem that causes CPU spikes on modern gigahertz level machines.
This shouldn't even be possible.
[+] [-] reddalo|2 years ago|reply
[+] [-] gizmo|2 years ago|reply
[+] [-] jwestbury|2 years ago|reply
[+] [-] shadowgovt|2 years ago|reply
I have definitely in the past chased around a massive repaint bug that only showed up in Firefox using flex boxes (only to have it vanish at the next minor revision).
Since this performance hit is showing up in Chrome, it will be interesting to see if it is a Chrome specific issue or a webkit issue.
[+] [-] Redoubts|2 years ago|reply
[+] [-] selfhoster11|2 years ago|reply
[+] [-] elaus|2 years ago|reply
[+] [-] bathtub365|2 years ago|reply
[+] [-] user5994461|2 years ago|reply
I will check if there are options to reduce that.
[+] [-] karaterobot|2 years ago|reply
[+] [-] Thaxll|2 years ago|reply
[+] [-] CommieBobDole|2 years ago|reply
If a major website doesn't work for me, and it's not a one-time thing, I tend to assume the problem might be on my end and troubleshoot from there instead of writing an article about how it's amazing that nobody else has ever noticed that it's been down forever.
[+] [-] sundvor|2 years ago|reply
[+] [-] h1fra|2 years ago|reply
https://codepen.io/bodinsamuel/pen/VwgEGyE
[+] [-] Timon3|2 years ago|reply
[+] [-] ptspts|2 years ago|reply
[+] [-] dist-epoch|2 years ago|reply
Maybe it depends on the GPU.
[+] [-] c0n5pir4cy|2 years ago|reply
This isn't exactly a new machine either, wonder if it's falling back to CPU rendering in your configuration.
[+] [-] ale42|2 years ago|reply
[+] [-] spuz|2 years ago|reply
[+] [-] seanalltogether|2 years ago|reply
[+] [-] archerx|2 years ago|reply
CSS animations are a resource hog and I avoid having continuously running animations for this reason. For one site I wanted to have a background gradient slowly shift colors over time in an infinite loop but my laptop fan kept spinning on the page and the cpu usage was high so I scraped it.
[+] [-] temp00112|2 years ago|reply
'''In a real world app that is responsive and highly dynamic, like BitBucket, the page is usually adjusted to fit content, neighboring elements get pushed out to fit the rotating image, then neighboring and parents elements get adjusted too… the layout of the entire page is redone on every frame because of the rotating image.'''
transform translations doesn't make the browser recalculate the layout for neighbour elements
[+] [-] 0xbadcafebee|2 years ago|reply
It's bizarrely been on life support forever. Atlassian doesn't seem to want to invest in it, despite the fact that the hosted VCS landscape isn't that big, and they've had a huge opportunity to steal business by converting GitHub Enterprise customers to a Bitbucket offering with cheaper deals from bundling with other Atlassian products. Despite all this, there isn't a single solitary reason to adopt Bitbucket, unless using GitHub and GitLab are forbidden.
We stay on Bitbucket because we don't want to invest the money and time it'll take to move off. But we know that we will move eventually, because the competition is just better in every way. I can't say that about the rest of Atlassian's products.
[+] [-] pharmakom|2 years ago|reply
[+] [-] WarOnPrivacy|2 years ago|reply
You aren't kidding. On Firefox 120 it ramps up a Xeon core to >50% and floors my GPU 3D at 100%.
I opened on Opera and CPU is negligible, GPU is steady at 15% (which still seems high for a throwaway web background).
for those playing along at home: https://github.com/signup?source=login
[+] [-] shadowgovt|2 years ago|reply
[+] [-] andygeorge|2 years ago|reply
[+] [-] zerop|2 years ago|reply
[+] [-] Zealotux|2 years ago|reply
This is how the author explains it, but it sounds suspicious to me, I’m not sure a CSS animate rotation would cause shifts in that case.
[+] [-] unknown|2 years ago|reply
[deleted]
[+] [-] imedadel|2 years ago|reply
[+] [-] bluedino|2 years ago|reply
Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay.
It was installed by the DevOps team on all the VM's in Azure. Many, many people reported that their machines were now using 100% CPU, or 1 of their multiple CPUs were pegged by a defender process. This isn't uncommon.
Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.
[+] [-] peter_d_sherman|2 years ago|reply
o Give me flamegraphs of all the computing resources a given web page is using; CPU, processes, threads, fibers, specific methods/procedures/functions inside of the Browser... also, be able to selectively disable and keep disabled, on a granular level (by web page/URL) things that use resources beyond a certain amount, for example, in the article's case, a buggy animation -- but more generically any resource or browser process or sub-process that is taking too much CPU time and/or other computing resources (RAM, I/O, Network, GPU etc.)...
(Yes, including those "power user" features could lead to the selective reduction of functionality for some web pages -- but the user should always be able to determine exactly what they want and what they don't want from any given web page...)
[+] [-] artursapek|2 years ago|reply
[+] [-] mgaunard|2 years ago|reply
They should just display stuff, not run silly animations or do calculations in the background.
[+] [-] Kiro|2 years ago|reply
[+] [-] gwbas1c|2 years ago|reply
One of the reasons why I loved Chrome when it came out was that the multi-process architecture made it easy to kill a Chrome process without closing all my open tabs: The offending tag would "crash," but otherwise I could continue browsing.
Also, around that time there was an ad on Slashdot that gobbled CPU. I remember quickly figuring out that it was the ad, grabbing a screenshot, and emailing them. I got back a quick knowledgeable reply (and apology).
[+] [-] SV_BubbleTime|2 years ago|reply
But going with BitBucket seems like a foot gun.