What Does will-change In CSS Do?

43 pointsposted 4 days ago
by ssernikk

16 Comments

vintagedave

4 days ago

There's a point at which you start coding for the implementation, not the API. That's always dangerous.

While I understand the point -- hinting to the implementation -- is it really something we need, in the sense that is CSS the right place for this, rather than handling these situations better in the browser implementation?

bgirard

a day ago

I proposed will-change a decade ago when I used to work on the rendering stack at Mozilla and also tuned frontends.

In some circumstances the heads up is totally required. For example if you're on a low spec mobile device with a relatively high resolution display, you're in a situation where you can't build a layer for an animation you didn't expect. And your memory footprint is so low so you don't want to be building layers unless you need them. If you don't have the heads up then you're going to drop the first few frames of the animation and the experience is going to be janky every time.

If you're in a situation where it's not required, then I would advice against using it FWIW. I still work on optimizing web frontends and I almost never use this property because I rarely need it.

culi

a day ago

I agree that it feels like a leaky abstraction but `will-change` has been around for well over a decade now and is restricted to the animation part of CSS and I can't think of any other feature of CSS that acts similarly

sorrythanks

19 hours ago

I'm not sure if will-change is coding for the implementation as much as it is engaging with material reality.

mirkodrummer

a day ago

I given up learning any new css, keeping up to date with "solutions" that would create more problems, more code, more confusion and difficult to maintain. I feel like it's becoming this humungous monster we don't want to talk about or admit it's there, for me personally it still has all the problems we complain about since who knows when anymore

CharlesW

a day ago

If you've given up on learning, naturally your understanding of what problems have been solved (and which remain) is going to be poor.

One of the meta-solutions you've missed is the establishment of "Baseline", which helps web devs understand what features and capabilities are safe to use. I hope this helps! https://web.dev/baseline

mirkodrummer

an hour ago

Baseline is totally useless, you can have an idea but then still need to go on the detailed browser table to learn more(on mdn). I decided to cherry pick my learning I prefer reading a math book than wasting my time learn by heart what fit-content formula is(total madness):

> Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).

politelemon

15 hours ago

I've noticed the page is laggy when I'm scrolling past that animated will change button. Assuming it uses will-change it seems to have had the opposite effect for me.

diath

a day ago

> Now the boxes get filled with pixels, colors, borders, shadows and images. Think of someone coloring in the board game pieces. This also uses the CPU and some extra memory to store the painted bits.

Are you sure this is happening on the CPU? I thought the CPU-side only generates a list of paint commands but the GPU does the bulk of this job.

mtklein

a day ago

For a good long while at least, this flag was a signal for the browser to use CPU rendering, because of the overhead of GPU setup for rendering very changing content was too high.

My knowledge is dated and second hand though. New GPU APIs hopefully changed this!

bgirard

a day ago

Do you have a citation? I don't believe that was ever the case when I worked on this.

gmueckl

a day ago

Is this true for text? Glyph rendering is complicated and I have a hard time imagining a high quality GPU renderer that can beat a CPU renderer due to this.

qingcharles

19 hours ago

I believe the situation has changed in the last year or so? I remember reading a bunch of stuff about how text rendering is finally being able to be pushed onto the GPU lately.