Animating box-shadow forces paint

[IchordeDionysos]

The paper-material element animates the box-shadow attribute, which causes paint. There is a better way to do this:

Explained in more detail

Expected outcome

Create a pseudo-element with the new box-shadow, set it's opacity initially to 0 and animate the opacity to 1, so only have 1 paint at the end of the transition if you want to set the box-shadow of the proper element.

Actual outcome

Actual the animation is hardly running at 60FPS

Live Demo

Demo with actual and expected method

Browsers Affected

According to csstriggers.com this is the case in all common browsers in EdgeHTML the actual method doesn't cause Layout but as well a repaint

I hope you fix this because I think there would be some refactoring needed if you do and I really hope you want to do it. (FOR THE PERFORMANCE :D )

[notwaldorf]

To be honest, if you're concerned about performance, you shouldn't be using this element in the first place -- we plan on deprecating it in favour of just using its css styles directly, which is what other elements (like paper-button) are already doing