Browser Paint Render And CSS The “will-change” Property

Last Updated on December 6, 2015

Recently a fun article was passed around showing how to achieve silky smooth rendering on box-shadow:
http://tobiasahlin.com/blog/how-to-animate-box-shadow

The next day, (as the internedz are wont to do) a scathing, yet friendly article followed up on the hanky-janky terrible-ness of that demo and how using the will-change property solves all your ills – particularly on position:fixed elements.
Troubleshooting rendering performance issues

So I further researched the will-change property myself and of course MDN puts everything back into perspective with a strong suggestion to not use will-change very much at all. And when you do, use JavaScript to add and remove it when needed because “this can cause the page to slow down or consume a lot of resources.”

I did learn one great devtools feature, “enable paint flashing” in the rendering panel. I use it almost all the time now.

Read about will-change on Mozilla Dev Network.

The plain CSS looks like this:

.sidebar {
  will-change: transform;
}

The browser hint copied MDN JS code:

var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}