Ripple animation causes whole page to repaint

[Elliot128]

Found this issue while testing on my Lg G2 with Chrome.

Ran a list with 1 button vs a list with 100 buttons.

Clicking a button on the 1 button list renders the ripple fluidly.

Clicking a button on the 100 button list renders the ripple with a low framerate.

@EnzoMartin discovered that this was because the whole page was being repainted with every frame of the ripple animation.

[javivelasco]

The problem is that in the initial implementation we animated width and height though a transition. This makes the browser to repaint. Furthermore, the ripple was positioned with absolute and, although this is not animated, it's also provoking a repaint.

The solution I've implemented gets rid of absolute positioning and animating width/height variations. Instead now it's animation a transform: scale() from 0 to 1. The position is changed using transform: translate3d. This allows to have a huge performance boost.

It will be released during the afternoon.