Hacker News

Buggy animation in Atlassian Bitbucket is wasting half a CPU core at all times

2023-12-0113:11261108thehftguy.com

I was running some benchmarks the other day. I usually have a lot of things running (Teams, Chrome, IDE, etc…) but I have to close everything to run some tight benchmarks. When I am done, one of th…


I was running some benchmarks the other day. I usually have a lot of things running (Teams, Chrome, IDE, etc…) but I have to close everything to run some tight benchmarks.

When I am done, one of the first things I open again is Chrome and that’s when I realized, why does CPU usage goes up and the fan starts spinning as soon as I open Chrome? It should stay at zero. Chrome is extremely resources hungry when there are many heavy pages opened but I don’t have many tabs opened.

The only tab I have opened and set as my home page is BitBucket. Coincidence?????

Long story short, there is a buggy animation in the BitBucket web UI that’s wasting half a CPU core at all times when there is a build in progress. The issue is with the “build in progress” icon animation.

.build-status-icon.build-in-progress-icon { animation-name: rotate-animation; animation-play-state: running; animation-iteration-count: infinite; animation-duration: 1.5s; animation-delay: 0s; animation-timing-function: linear; transform-origin: center; }

The CSS animation has terrible performance characteristics.

You can open Chrome monitoring tools with Shift+Escape.

  • When the animation is running, whenever a build is in progress, chrome shows the tab is using 30% to 70% of a CPU and the GPU is spinning near 90%.
  • When removing the animation (tip: remove the css or set status to “paused”), the CPU sits near 0% and the GPU near 0%.
  • The CPU spikes occasionally, the page is polling the server periodically to update PR and build status. That part is normal.

Numbers on a laptop, you could get a third of that if you have better hardware than me (tip: use a desktop). I’d love to say this is an old CPU running on a low frequency in power saving mode, but not quite, this is the most expensive laptop in the manufacturer line up with the most expensive CPU available, the laptop can’t scale down frequency because of BitBucket and Slack requesting and wasting too much power, the laptop can’t really scale up frequency because of overheating.

That is to conclude: bad software running on bad hardware.

That’s all for today unless you are curious for more details. Personally, I was definitely curious how a seemingly trivial animation can be so slow?

The Chrome performance tools have a timeline showing the time to render each frame. Target is 60 frame per second, or 16 ms per frame.

  • The timeline shows 6 ms to render when the animation is running.
  • The timeline shows only 1 ms or 2 ms to render when the animation is removed.

The computer is doing a lot more work and recomputing the layout of the entire page. One thing I do not understand though is why Chrome is showing full GPU usage? Where does GPU usage go to?

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).

A circle can be rotated in place. It doesn’t take more space than the initial circle. A square cannot.

Did I say the “build in progress” circle is not a circle? The circle is a square! It’s a square!

Rotating a square cannot be done in place. Let me give one quick picture to illustrate.

Illustration, this is an example table from W3C with the first example I could find on stack overflow to add a CSS rotate animation. The example image happens to be a cat picture.

Hopefully that’s good enough to explain that a square picture is getting out of bounds as it rotates. In this basic example, the table does not resize to fit the rotated image and the image overlaps on other content.

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.

You can see for yourself if you have the software. You can highlight elements (like in the screenshot above) with the developer tools and you will be able to see invisible containers getting resized in real time. I think that’s what the CPU is busy doing most of the time.


Read the original article

user5994461

Karma: 11302
...
 @Hacker__News
@hacker._news

Comments

  • By rafram 2023-12-0114:277 reply

    > 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.

    • By steve_adams_86 2023-12-0115:122 reply

      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.

      • By nameless912 2023-12-0115:271 reply

        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.

        • By steve_adams_86 2023-12-036:37

          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.

      • By hulitu 2023-12-0313:11

        > I’m not sure why a transform would be so inefficient

        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.

    • By ChoGGi 2023-12-0114:563 reply

      This person has also stated the Linux kernel is hard-coded for 8 cores.

      https://news.ycombinator.com/item?id=38260935

      • By user5994461 2023-12-0116:021 reply

        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.

        • By Narretz 2023-12-0120:52

          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)

      • By tester756 2023-12-0116:57

    • By jonwest 2023-12-0114:581 reply

      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?

      • By lliv 2023-12-0115:16

        > 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.

    • By yrds96 2023-12-0115:241 reply

      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...)

      • By governmentdude 2023-12-0115:45

        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.

    • By simias 2023-12-0115:191 reply

      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?

      • By BobaFloutist 2023-12-020:02

        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).

    • By josefx 2023-12-0115:201 reply

      > …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.

      • By rafram 2023-12-0116:241 reply

        SVGs are, alas, also rectangular.

        • By josefx 2023-12-0120:19

          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.

    • By justsomehnguy 2023-12-0118:431 reply

      You missed the forest:

      >> 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.

      • By Izkata 2023-12-0217:59

        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.

  • By ioulian 2023-12-0113:37

    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.

    So the "bug", must be somewhere else?

  • By dumbo-octopus 2023-12-0115:431 reply

    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.

    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 :)

    • By Jeema101 2023-12-0116:141 reply

      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.

      This shouldn't even be possible.

      • By dumbo-octopus 2023-12-0116:20

        Indeed. One could write a book on all the ways "DevEx" has stomped over "UserEx".

HackerNews

About