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.
Yeah, a CSS rotate is just a visual effect - it doesn’t change the item’s actual box size and therefore doesn’t cause page reflows. I suspect there’s something else happening here. It may be that it’s triggering a repaint of adjacent regions or the entire table.
'''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
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.
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.
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.
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 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.
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...
Through all of our technical advancement, hosting is still expensive, okay? /s
People act like we couldn't afford to host things in the 90s before Moore's law ran for decades. Suggesting we wouldn't have blogs/websites if not for advertising
My guess would be the person running the website has used one simple 3rd party include that then loads all of the other things so that they might not actually be aware of what's being done under the hood. Or, they are a sociopath. But not being able to come up with reasons is not a good look.
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.
> When removing the animation (tip: remove the css or set status to “paused”), the CPU sits near 0% and the GPU near 0%.
Seems pretty easy to replicate. I don't know this particular screen they're talking about otherwise I would try it. I definitely have used CSS animations before without thinking about potential performance implications so this does seem like a good thing to try to understand in better detail.
I agree that rotating a square doesn't seem like it should be the root cause here though.
EDIT: I suppose it is possible that you are still correct though. Perhaps there is some JavaScript that is looking at the CSS properties as a way to trigger more significant work. It seems like a hacky thing to do, but it would be possible in principal.
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.
While we're on the subject, does bitbucket just seem horribly slow for pulling lately? My work uses bitbucket and my personal projects use github, and lately I've been doing a lot of personal project work over the holidays, and every pull of bitbucket is just painfully slow. Is that because it's a bigger repo?
I'd be willing to wager the X Factor is graphics card configuration and a card optimized for high performance 3D rendering (including having the drivers installed properly to leverage those features).
There's a bit of a correlation between Firefox users and users who are mostly content that their hardware supports explicitly a 2D desktop GUI and is not optimized for anything fancier. But nowadays, the browser itself is a 3D application because the 3D compositing pipeline is also the high performance 2D compositing pipeline.
My CPU was at 27% (i3-4130) and 27 watts power use vs. 11w at idle. Added uBlock filter: github.com##div.signup-stars and CPU was back to 1%. Background stars animation is the culprit.
Believable. I spend a lot of time on this screen and it's been killing performance & Webex sessions. Another place to find this sort of problem is to show full log after a build.
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.
Well you should read the reply on the kernel bug tracker:
"Peter already gave a quick reply on this regard couple years ago [1] and I think more tests and numbers are required in different environments, instead of solely think in the raw number of cores. When a high throughput server starts to fall down based on the task time slices? Maybe increasing from 8 to 24 is fine in normal memory intensive tasks, but what about 128 cores in a high-demand network server?
8 has proven to be "enough" so far (compared to other OSes), but, of course, it doesn't mean it hasn't room for improvements."
So it's pretty clear that it's not going to change any time soon and it's not a bug.
Similar thing presumably happens on GitHub commit pages - at the bottom there's a "You’re not receiving notifications from this thread." (or a different message if you have, presumably) that only loads once you've scrolled to it, but before that it's a spinner which takes up CPU (even though it's not even visible). It's similarly an svg, with 'animation: rotate-keyframes 1s linear infinite;'
This is a cool way to make the case for setting a preference for preferred reduced motion. I never got bothered one way or the other but if it saves battery...
> 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.
If you're wondering about that one from few weeks ago. One person from Intel noticed the article and confirmed the kernel bug, they ran some of the kernel benchmarks on their 24 core CPU and found up to 15% improvements when fixed (most difference on scheduler fifo benchmark, though 0% difference on most benchmarks).
I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.
I thought the basic premise was wrong that the Kernel only uses a maximum of 8 cores. It was rather some scheduling logic that was implemented with a maximum of 8 cores in mind. So the author may have been right that something was wrong, but also wrong about the details (like in this article)
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?
I kept reading it expecting something to jump out at me. He just goes on about how “a square cannot be rotated”.
This honestly feels like more of a chrome bug or more likely some really weird settings on behalf of the author. I’ve seen this exact approach on the web. Nothing struck me as odd.
What is odd is that he didn’t do any testing with a different browser, machine, or OS even. He just decided to make a blog 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.
Not to super rag on this person, but wow some of the other articles on their website...
They have an article on "cracking the hackerrank test" that straight up advocates for cheating on screeners companies are starting to do through hackerrank. I'm not about to claim that these tests are at all good at measuring your skill as a developer, but I would much rather a candidate engages with the process honestly than openly brags about cheating.
I didn’t see that one. If I saw someone publicly describe being dishonest in an interview process, I think I’d have to rule them out by default.
I know not everyone is perfectly honest all the time. But if you advertise cheating a process meant to reveal rather than conceal information, there’s a real problem.
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?
Split the difference and make hexagons? You can still address pixels with (r, θ), and you can tile them with other hexagons (Or squares, if you're into that sort of thing).
> …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.
While I wouldn't be surprised if browsers still haven't managed to actually replace flash there have to be dozens of ways to rotate a circle without rotating the rectangle it is contained in. In the case of svg you can, as far as I can find, change the rotation of any shape directly using javascript.
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...)
Animated gifs have been optimized to an absurd degree for decades. For achieving high-performance animations, this is what I'd try. Then benchmark real-world performance.
And it does only change the image, because it's a CSS animation. For page rendering purposes, browsers only use the size and position of the un-rotated image. It's even visible in the Grumpy Cat example, the rotated image overlaps the edges of the table because CSS transformations don't affect the rest of the page.
FWIW Spotify's latest big banner in their web/desktop app (something about christmas playlists) takes 100% CPU. I started noticing it after a while when my laptop got really hot and the Spotify Helper Process was stuck at 100%. Navigating away into an album display fixed it..
I just tested this, when animation is running, CPU for the tab (according to chrome Task Manager) was around 3% (Core i7-10875H). When animation stopped, it jumped back to 0.0.
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).
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.
111 comments
[ 3.3 ms ] story [ 179 ms ] threadThis 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.
'''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
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.
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?
https://codepen.io/bodinsamuel/pen/VwgEGyE
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.
People act like we couldn't afford to host things in the 90s before Moore's law ran for decades. Suggesting we wouldn't have blogs/websites if not for advertising
I remember the old Internet
I will check if there are options to reduce that.
Seems pretty easy to replicate. I don't know this particular screen they're talking about otherwise I would try it. I definitely have used CSS animations before without thinking about potential performance implications so this does seem like a good thing to try to understand in better detail.
I agree that rotating a square doesn't seem like it should be the root cause here though.
EDIT: I suppose it is possible that you are still correct though. Perhaps there is some JavaScript that is looking at the CSS properties as a way to trigger more significant work. It seems like a hacky thing to do, but it would be possible in principal.
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.
There's a bit of a correlation between Firefox users and users who are mostly content that their hardware supports explicitly a 2D desktop GUI and is not optimized for anything fancier. But nowadays, the browser itself is a 3D application because the 3D compositing pipeline is also the high performance 2D compositing pipeline.
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
And besides “Microsoft <3 Open Source” right?
… Right?
I think the only reason it got so many points is because it's a hate on Atlassian thread.
The implementation seems perfectly normal, I would guess 90% of all developers would implement an animation this way.
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.
"Peter already gave a quick reply on this regard couple years ago [1] and I think more tests and numbers are required in different environments, instead of solely think in the raw number of cores. When a high throughput server starts to fall down based on the task time slices? Maybe increasing from 8 to 24 is fine in normal memory intensive tasks, but what about 128 cores in a high-demand network server? 8 has proven to be "enough" so far (compared to other OSes), but, of course, it doesn't mean it hasn't room for improvements."
So it's pretty clear that it's not going to change any time soon and it's not a bug.
They should just display stuff, not run silly animations or do calculations in the background.
Plato's Callicles would tell you that this is idealistic nonsense and nature has shown us that we need beautiful pages that drive engagement.
Humans teach each other that Socrates is right, but if we look around us, its clear we've been told a lie.
There is no "logic" here.
…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.
https://news.ycombinator.com/item?id=38260935
I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.
https://thehftguy.com/2016/11/01/docker-in-production-an-his...
https://thehftguy.com/2017/02/23/docker-in-production-an-upd...
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?
Yeah I don’t get it either.
I kept reading it expecting something to jump out at me. He just goes on about how “a square cannot be rotated”.
This honestly feels like more of a chrome bug or more likely some really weird settings on behalf of the author. I’ve seen this exact approach on the web. Nothing struck me as odd.
What is odd is that he didn’t do any testing with a different browser, machine, or OS even. He just decided to make a blog post.
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.
They have an article on "cracking the hackerrank test" that straight up advocates for cheating on screeners companies are starting to do through hackerrank. I'm not about to claim that these tests are at all good at measuring your skill as a developer, but I would much rather a candidate engages with the process honestly than openly brags about cheating.
I know not everyone is perfectly honest all the time. But if you advertise cheating a process meant to reveal rather than conceal information, there’s a real problem.
Last i asked, if you change a (1) pixel on a modern computer, you need to redraw the screen because it's a surface which is being updated.
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?
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.
>> 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.
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).
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.