CODEWITHSUNDEEP
javascriptcss
Alex
Alex

Reputation: 398

What is advantage of using will-change property instead of translate3d for hardware acceleration?

In the interesting article Everything You Need to Know About the CSS will-change Property it says that using the translate3d() hack is the old way of doing things if you want hardware acceleration, and instead of that you should use will-change. Is there any benefit in performance when using will-change? I have found it is extremely difficult in some cases to add will-change via JavaScript just before element triggers animation. For example

  1. You can't just put will-change in CSS and expect it to work, because it will be worse if you had multiple elements.
  2. You can't either put will-change in :hover pseudo selector because the browser needs some time to prepare.
  3. You are left with animation on click event, when you can add willChange on hover via JavaScript leaving the browser enough time to prepare (200ms).

Overall you must somehow predict users behavior and that is difficult. It is too complicated (you must, also, remove will-change after animation ends) over translate3d(). Why use it?

Upvotes: 4

Views: 2001

Answers (1)

BoltClock
BoltClock

Reputation: 724342

  1. As you've already stated, specifying a transform constitutes a hack. will-change is a standard.

  2. There are guidelines around when to use will-change and when not to (with the general idea of using it sparingly and only when you need to). On the other hand, many authors recommend using the transform hack without abandon.

If you expect a user to interact with an element in a way that triggers some resource-intensive visual effect, set will-change. Simple as that. You don't have to predict when or if the user will ever interact with the element and decide whether or not to set will-change — you just set will-change and let the browser worry about the rest.

You don't will-change all the things, but the moment you expect a certain property to change on a certain element, tell the browser that that specific property will-change on that specific element. Whether or not a user actually triggers the change in that specific page load or browsing session is irrelevant to you as the author.

will-change doesn't inherently have better performance — in fact, it does pretty much the same thing as the transform hack at a high level. The performance boost comes mostly from judicious use of will-change so you don't waste system resources on things that don't need them (see point #2 above).

Upvotes: 6

Related Questions