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:
1 2 3 |
.sidebar { will-change: transform; } |
The browser hint copied MDN JS code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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'; } |