What Does will-change In CSS Do? • Hacker News Board

Re: What Does will-change In CSS Do?

#11

Post by gmueckl » Sat, Aug 30, 2025, 12:19 AM UTC

diath wrote: post #5

> 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.

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.

Re: What Does will-change In CSS Do?

#12

Post by Figs » Sat, Aug 30, 2025, 1:00 AM UTC

The only time I can recall needing to use will-change is to workaround this Leaflet/WebKit issue: https://github.com/Leaflet/Leaflet/issues/8068

Re: What Does will-change In CSS Do?

#13

Post by qingcharles » Sat, Aug 30, 2025, 2:46 AM UTC

gmueckl wrote: post #11

diath wrote: post #5

> 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.

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.

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.

Re: What Does will-change In CSS Do?

#14

Post by krapp » Sat, Aug 30, 2025, 3:02 AM UTC

qingcharles wrote: post #13

gmueckl wrote: post #11

Earlier quoted context omitted.

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.

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.

The SDL3 TTF library has the TextEngine API to build a font atlas targeting the CPU or GPU (eg https://wiki.libsdl.org/SDL3_ttf/TTF_CreateGPUTextEngine). Its slightly more cumbersome because you have to work with TTF_Text objects instead of char*s but it's quite doable.

Re: What Does will-change In CSS Do?

#15

Post by sorrythanks » Sat, Aug 30, 2025, 3:13 AM UTC

vintagedave wrote: post #2

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?

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

Re: What Does will-change In CSS Do?

#16

Post by politelemon » Sat, Aug 30, 2025, 7:17 AM UTC

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.

Re: What Does will-change In CSS Do?

#17

Post by hollowturtle » Sat, Aug 30, 2025, 9:07 PM UTC

CharlesW wrote: post #6

hollowturtle wrote: post #3

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

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

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).