My white whale: A use case for will-change | CSS-Tricks


 Nic Chan:

[…] the will-change property landed in major browsers in August 2015, and I’ve been on the lookout for when to use it ever since. It might seem self-evident to apply it to commonly animated properties such as transform or opacity, but the browser already classifies them as composite properties, thus, they are known as the few properties that you can already expect decent animation performance from. So, heeding the advice of the great developers who came before me, I was cautious and waited for the right opportunity to come along.

I was thinking-out-loud about this as well on ShopTalk not too long ago. I get the spirit behind will-change. It’s like responsive images or DNS prefetching: you give the browser extra information about what you’re about to do, and it can optimize it when it happens. But with will-changewhen? Why isn’t there a simple reduced test case demo to showcase something with bad performance, then will-change being applied, and it becomes good performance?

Well Nic found one little directly useful case where a hover-transformed pseudo-element leaves a little dingus of color behind in Safari, and that goes away if you use will-change. I tested it in the latest versions of Safari and found it to be true. Alrighty then, one use case!

I’d love to see a more obvious direct use case. I imagine the sweet spot is on lower-power devices (that still have GPUs) but are new enough to know what will-change is.

Direct Link →

Source link

About Author


Please enter your comment!
Please enter your name here

Share post:




More like this

Frontend Rewind 2023 – Day 04

Step into Day 4 of “Frontend Rewind 2023”!...

7 Best Practices to Improve Emoji Accessibility on the Web

Emojis are frequently called the universal language, or...

Understanding Typographic Hierarchy | Envato Tuts+

What is hierarchy in typography, and how does...

Best Adobe XD Templates for Web Designers

Whatever business you’re designing for, chances are there’s...