PolymerElements
Animating box-shadow forces paint
The paper-material element animates the box-shadow attribute, which causes paint. There is a better way to do this:
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 )
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
