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

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.
paint-flashing
Read about will-change on Mozilla Dev Network.

The plain CSS looks like this:

The browser hint copied MDN JS code:

Peter Dillon

Development teams seek me out for visual design, reskinning, information hierarchy, usability, iconography, improving task flow, improving the front end build process and more.

I specialize in creating engaging solutions to solve real world problems while designing beautiful applications that make the lives of users easier.