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

221–230 of 276 posts

Re: Don't animate height

#221

Post by kadoban »

troupo wrote: post #213
deepsun wrote: post #50

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 .

Translation: just make a completely different functionality and effect than what was originally intended because the DOM can only handle static content, barely.

The suggested change wouldn't affect functionality or the effect. It just tells the browser that there's a thing around the changing part with a fixed size that can't possibly change layout of anything around it, to the user it's invisible.

Re: Don't animate height

#222

Post by csomar »

_9ptr wrote: post #210
edoceo wrote: post #183

Earlier quoted context omitted.

I wish. But some sites we are stuck with. EG: bank, HR App, etc.

How about not living in society and instead going into the wild?

Consuming 100% of my cpu for a stupid animation is the opposite of living in a society.

Re: Don't animate height

#223

Post by vanschelven »

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…

To take matters in my own hand I wrote "tabdouse", a tiny kill-at-high-cpu script: https://www.bugsink.com/blog/tabdouse/

Quite unreliable and more a joke than anything, of course...

Re: Don't animate height

#224

Post by adastra22 »

valenterry wrote: post #187
groundcontr01 wrote: post #172

Earlier quoted context omitted.

No css at all is pretty extreme, but I'd be on board with disabling css animations

That's very very sad. Animations can make UX much better when used correctly.

…how? How do they improve the user experience, at all?

Re: Don't animate height

#225

Post by adastra22 »

sema4hacker wrote: post #163
legitster wrote: post #115

Earlier quoted context omitted.

As an old-school webguy, fixes like this article make me sad. The average front-end person these days has so little respect for the DOM and then gets mystified about why the McMaster-Carr website is so good despite being build with ancient practices.

I just went to the McMaster-Carr home page and right-clicked for "View Page Source". There's a LOT of code there.

All modular, I hope.

Re: Don't animate height

#226

Post by ajsnigrutin »

crazygringo wrote: post #127
HWR_14 wrote: post #120

Earlier quoted context omitted.

100% of the CPU for 5 seconds seems unreasonably long for a random webpage.

For a news article, absolutely. But I think it needs to be able to handle JavaScript-heavy webapps too. My suggestion wasn't really about promoting maximum best practices, but just avoiding total runaway excess.

MS word on a 133mhz pentium and 16mb of ram needed less than 5s to start.

Websites don't need that much resources and should be optimized.... if somehow web developers could read, maybe they'd start doing that.

Re: Don't animate height

#227

Post by ulrikrasmussen »

valenterry wrote: post #187
groundcontr01 wrote: post #172

Earlier quoted context omitted.

No css at all is pretty extreme, but I'd be on board with disabling css animations

That's very very sad. Animations can make UX much better when used correctly.

I disagree. The first thing I do on a new phone is to disable all animations. It makes the phone feel so much faster.

Re: Don't animate height

#228

Post by jaapz »

bartread wrote: post #184
legitster wrote: post #115

Earlier quoted context omitted.

As an old-school webguy, fixes like this article make me sad. The average front-end person these days has so little respect for the DOM and then gets mystified about why the McMaster-Carr website is so good despite being build with ancient practices.

Well, and especially because the “fixed” version is still - if I’ve read correctly - consuming 12% CPU before any user interaction on a page that’s otherwise substantially a plain or possibly RTFish text editor. How is that considered acceptable? It’s still going to drain the battery faster than is justified, even if at a somewhat reduced rate from the pre-fixed case. The acceptable range would be something like 0 -…

Couldn't they just have used an animated gif or png, the amount of CPU used probably wouldn't even be measurable

Re: Don't animate height

#229

Post by imcotton »

Does anyone have the courage to perform a similar inspection on the Cloudflare homepage like the author did? On my M4 Mac mini, Safari lagged with single-digit frames per second (FPS), which scared me so much that I had to close the page as quickly as possible.
Post reply on HN