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

111–120 of 276 posts

Re: Don't animate height

#111

Post by lelandfe »

Quarrelsome wrote: post #89

> Instead, we can create the illusion of a changing height by using two rectangles, applying translate to each. Its a very clever solution and props to the engineer, but this being the fix makes me truly despair at where we are as an industry around web UI. That html and css won despite these sorts of counter-intuitive horrors. UI layers that make me feel good reflect intent. I can take an image and write some code t…

It’s literally the sliding doors technique from, uh, two decades ago https://alistapart.com/article/slidingdoors/

Re: Don't animate height

#112

Post by gjs278 »

zuhsetaqi wrote: post #88
HWR_14 wrote: post #9

What amazes me is that so much a M2 Mac's resources would be used to render a website even if it rendered everything from scratch. There is almost no graphic content compared to a video game produced decades ago, and they would easily render a frame in 1/2 the time on decades old hardware

Keep in mind that the percentage in Activity Monitor is 100 % per core, so a 10 core CPU can go up to 1000 % usage. So 60 % means 60 % of a single core not of the whole CPU.

[dead]

Re: Don't animate height

#114

Post by bobthepanda »

callalex wrote: post #96
bobthepanda wrote: post #63

Earlier quoted context omitted.

The problem is that everyone (browsers + developers) need to agree on a replacement, which is notoriously hard to do. Chrome got laughed out of the room with Dart/Flutter.

Dart/Flutter was never a technical issue, but a political/monopolistic issue. The underlying monopoly has not changed, so I don't really see a path forward unless the chromium team magically changes leadership.

I guess my point is, if the big Chromium team couldn't pull something like this off, who else would? At this point major web updates tend to get born in one of the big tech companies funding web development, either directly or indirectly (Mozilla being funded by Google)

Re: Don't animate height

#115

Post by legitster »

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 .

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.

Re: Don't animate height

#118

Post by barrkel »

orhmeh09 wrote: post #107
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…

Yes, with StopTheMadness https://underpassapp.com/StopTheMadness/ It works on Safari, Chrome, and Firefox, but you must buy it.

It only works on Apple though it looks like.

Re: Don't animate height

#119

Post by bfgeek »

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 .

This likely more effective quite a few years ago, but not particularly important today.

Changing height typically only shifts elements, and browser engines typically wont relayout them due to position changes.

"overflow: clip" is also much more lightweight than "overflow: hidden"

Re: Don't animate height

#120

Post by HWR_14 »

crazygringo wrote: post #80
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…

Seriously. It seems pretty reasonable to allow a web page a total amount of processing that is something like 100% CPU or GPU for 5 seconds. (E.g. can be 25% for 20 seconds.) And beyond that it gets throttled to 3% CPU cumulative max for however long it's been open so far. And make that the default for popular browsers, so sites are forced to be efficient or else be super super janky and stuttering. And allow a permi…

100% of the CPU for 5 seconds seems unreasonably long for a random webpage.
Post reply on HN