> 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).<p>…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.<p>There are so many shockingly basic misunderstandings in this post.
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).<p>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.<p>So the "bug", must be somewhere else?
This has nothing to do with the circle. Rendering animations in Chromium really is just that expensive.<p>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.<p><a href="https://github.com/microsoft/vscode/issues/138396">https://github.com/microsoft/vscode/issues/138396</a><p><a href="https://github.com/microsoft/vscode/issues/22900">https://github.com/microsoft/vscode/issues/22900</a><p>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 :)
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.
I would double check what OP found because his blog is full of inaccuracies, ex:<a href="https://thehftguy.com/2023/11/14/the-linux-kernel-has-been-accidentally-hardcoded-to-a-maximum-of-8-cores-for-nearly-20-years/" rel="nofollow noreferrer">https://thehftguy.com/2023/11/14/the-linux-kernel-has-been-a...</a>
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)<p><a href="https://codepen.io/bodinsamuel/pen/VwgEGyE" rel="nofollow noreferrer">https://codepen.io/bodinsamuel/pen/VwgEGyE</a>
Should have used a .gif for the animation :)<p>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 don't think the performance reason is this<p>'''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.'''<p>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 <i>for Bitbucket</i>, where they'll work for GitHub or GitLab. It only recently, after something like 7 years, gained the ability to <i>pass a secret in a webhook</i>. 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.<p>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.<p>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.
SVG animations in CSS are notoriously CPU intensive (see <a href="https://news.ycombinator.com/item?id=22302150">https://news.ycombinator.com/item?id=22302150</a>)
Work at a large company. Lots of non-technical people fall under IT.<p>Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay.<p>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.<p>Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.
Random idea for a future browser:<p>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.)...<p>(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.<p>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.<p>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.<p>But going with BitBucket seems like a foot gun.
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.
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;'
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?
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.
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...
This article is filled with misinformation and seems unnecessary hostile.<p>I think the only reason it got so many points is because it's a hate on Atlassian thread.<p>The implementation seems perfectly normal, I would guess 90% of all developers would implement an animation this way.
The same thing happens with <a href="https://www.wolframalpha.com" rel="nofollow noreferrer">https://www.wolframalpha.com</a> for me in Safari on macOS, where I frequenly get 250% CPU usage. Even with <i>Safari->Develop->Disable JavaScript</i>, after showing the Develop menu with <i>Safari->Preferences...->Advanced->Show Develop menu in menu bar</i>. Sounds like it's due to the css using time or animations. I can't find a fix for it, other than disabling <i>Safari->Develop->Disable Styles</i>, but who wants to surf the web without css?<p>Here is an AppleScript I've hacked together over time to show the Safari tab for a PID from Activity Monitor so it can be closed, note that I'm on macOS 10.13.6 on this old 2011 Mac Mini, using Safari 13.1.2, so YMMV:<p><pre><code> -- launch Activity Monitor to find the PID of a misbehaving tab and show it with this script
-- ensure that Safari->Debug->Miscellaneous Flags->Show Web Process IDs in Page Titles is enabled
tell application "System Events" to tell process "Safari"
-- ensure that user has enabled assistive access
try
menu 1 of menu bar item "Safari" of menu bar 1 -- throws exception if menu not visible
on error
display dialog "Please enable assistive access for this script by dragging it into the list of apps in:
System Preferences->Security & Privacy->Privacy->Accessibility
(It must be disabled and re-enabled each time this script is edited)" buttons {"OK"} default button "OK"
return
end try
-- ensure that user has enabled Show Web Process IDs in Page Titles
try
set debugMenu to menu 1 of menu bar item "Debug" of menu bar 1 -- throws exception if menu not visible
on error
display dialog "Enable Debug menu in Safari? It will be relaunched but preserve any open windows." -- stops script if Cancel is clicked
do shell script "defaults write com.apple.Safari IncludeInternalDebugMenu 1 && killall Safari && osascript -e 'tell application \"Safari\" to activate'" -- force quit Safari to preserve windows on relaunch
return
end try
tell menu item "Show Web Process IDs in Page Titles" of menu 1 of menu item "Miscellaneous Flags" of debugMenu
if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click
end tell
end tell
-- show tab matching string, prepopulated with [WP _pid_]
set searchString to text returned of (display dialog "Please enter a string to find the Safari tab containing it:
([WP _pid_] from Activity Monitor for convenience)" default answer "[WP _pid_]")
tell application "Safari"
-- bring frontmost to avoid App Tamer from slowing script
activate
repeat with w from 1 to count of windows
repeat 1 times
try
set theTab to (first tab of window w whose name contains searchString)
on error
exit repeat
end try
set current tab of window w to theTab
-- work around a bug/feature of Safari where windows lack a way to bring them to front
if index of window w is not 1 then
set index of window w to 2
tell application "System Events"
tell application process "Safari"
keystroke "`" using command down
end tell
end tell
end if
return
end repeat
end repeat
display dialog "Couldn't find tab containing \"" & searchString & "\"." buttons {"OK"} default button "OK"
end tell
</code></pre>
Just open Script Editor, paste it in and save it as an application under <i>~/Library/Scripts</i> or by choosing <i>Script menu->Open Scripts Folder->Open User Scripts Folder</i>. The Script menu can be shown via <i>Script Editor->Preferences->General->Show Script menu in menu bar</i>. Then run it and follow the prompts to ensure that assistive access has been enabled and that tabs show their PID.<p>The script is loosely derived from:<p><a href="https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html" rel="nofollow noreferrer">https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html</a><p><a href="https://apple.stackexchange.com/questions/45768/how-can-i-figure-out-which-tab-in-safari-is-using-cpu" rel="nofollow noreferrer">https://apple.stackexchange.com/questions/45768/how-can-i-fi...</a><p>I tried to make a version that just shows the Safari tab having a pid, but lost a day to it doing a deep dive into listing windows and their pid:<p><a href="https://stackoverflow.com/questions/48058409/get-windows-with-same-process-name-but-different-pid-in-applescript" rel="nofollow noreferrer">https://stackoverflow.com/questions/48058409/get-windows-wit...</a><p><a href="https://stackoverflow.com/questions/14551419/listing-all-windows-of-all-applications" rel="nofollow noreferrer">https://stackoverflow.com/questions/14551419/listing-all-win...</a><p><a href="https://stackoverflow.com/questions/42018149/get-pids-of-all-open-windows-on-macos" rel="nofollow noreferrer">https://stackoverflow.com/questions/42018149/get-pids-of-all...</a><p>Unfortunately Apple made AppleScript and Automator so arduous to use that I consider them adversarial programming. Like with MS Visual Basic, there's usually less than 50% odds of getting a script to work, regardless of how experienced the developer is. Certainly 0% without resources like web forum posts.<p>Web browsers are even worse, in the sense that they're written for users instead of developers. Some low-hanging fruit would be to pause all non-focused tabs after a configurable period of time, so that they only use memory. I've wanted that since I first saw NCSA Mosaic in 1995, along with a great many other improvements which the powers that be seem to work tirelessly to prevent. Blah.