Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Don't animate height

granola.ai

Post reply on HN
Print view View original

41–50 of 276 posts

Re: Don't animate height

#41

Post by jasonjmcghee »

norskeld wrote: post #38
jtangelder wrote: post #3

Wondering what the performance of a simple animated gif would be, instead of the composite layer transformations.

Personally, I'd be annoyed by both the resource-consuming animations and the blurry GIFs/canvas. Infisical does use the latter (canvas) for icons in their UI, and I somewhat hate it. I'd rather look at crisp, but static icons.

Canvas should never be blurry. If it is, something is doing a bilinear upscale. I'd guess someone forgot to take the scale factor of your display into account.

Or there are images being used in the canvas, which would defeat the purpose for the use case you described.

Re: Don't animate height

#43

Post by seemaze »

nawgz wrote: post #34
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Yes you're right, most users LOVE barebones and classic websites, that's why HN is so popular and Reddit hardly has any users. For that matter, do we really need colors? Just ship it with browser default styles.

Exactly this! I wish the entire web was easier to read on my e-ink device.

Re: Don't animate height

#44

Post by MITSardine »

xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

The app taking "only" 6% of a $3k laptop's CPU to show two lines of text and a little 2D animation also gave me pause, but maybe this is just how it is. Still I wonder how people were squeezing pacman out of prehistoric machines, and we're using an 80's supercomputer worth of CPU power (not that far given they were in the ~ 1 GFLOP range) to animate three green bars today.

Re: Don't animate height

#46

Post by mrob »

verall wrote: post #33

Is it possible to restrict this as a user? Like to force webpages to use under a certain amount of render/paint time/resources or else just break so that one dumb tab doesn't use up all my battery? Then I can opt-in to greater resources usage if it's a webpage I actually care about. I've seen the "This webpage is using alot of resources" popup before but I don't think it would happen in this case. Because honestly I…

Your browser should allow you to override all CSS on the web. Here's how I disable CSS animations in Firefox:

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

Re: Don't animate height

#47

Post by LastMuel »

nawgz wrote: post #34
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Yes you're right, most users LOVE barebones and classic websites, that's why HN is so popular and Reddit hardly has any users. For that matter, do we really need colors? Just ship it with browser default styles.

I hear your snark, but Reddit isn't exactly a beauty contest winner.

Re: Don't animate height

#48

Post by exiguus »

I'm not 100% convinced. Likely because the article doesn't show the difference between animations that are announced with 'will-change' and/or elements that are animated with position absolute. Also, it looks related to the browser and there was no evidence that this is also a issue in FF or Chrome.

Re: Don't animate height

#49

Post by xp84 »

panic wrote: post #40
xp84 wrote: post #31

Here's the part that makes me confused/angry: this is a flat style icon with maybe 4 or 8 colors displayed on a static flat green background. I could have built this 25 years ago with a single GIF with about 6 frames, that was a couple of kilobytes and would be performant on the (relative) potato computers we had then. With CSS you can easily make that GIF a background image and position it correctly in the or whatev…

Won’t the GIF also burn a ton of CPU? I’m not convinced it would actually be more performant than sliding textures around.

Try it yourself.

Here is a 640x640 gif: https://cdn-icons-gif.flaticon.com/6172/6172533.gif

That tab is using 4-5% CPU on my M1 Pro, and I also have a "GPU process" in my task manager, which is showing about 8% in the "CPU" column when it's onscreen. So, no, using a 64x64 GIF (1/100th the area of my example) you'd need to do this animation would absolutely not use any significant CPU or GPU. Which is why those worked very effectively to animate small icons with zero lag on the potato computers we had in 2000.

Re: Don't animate height

#50

Post by deepsun »

Just wrap it in a container with fixed height and "overflow: hidden".

Now the layout engine knows that it doesn't need to recalculate positions of elements outside that wrapper, and it's much faster.

By the way, the same trick was speeding up large rendering back in the day. As long as you know the size of your rows or columns ahead of time, which kinda defeats the purpose of .

Post reply on HN