PERF: paper-ripple sets transform every frame instead of using accelerated animation

[ebidel]

From @danakj on December 18, 2015 23:3

Rather than setting a new scale every frame, the effect would achieve better performance across browsers by using an accelerated animation. This would provide the browser with more hints to avoid re-raster on every frame.

The bug occurs in the drawRipple method https://code.google.com/p/chromium/codesearch#chromium/src/third_party/catapult/third_party/polymer/components/paper-ripple/paper-ripple.html&l=190

It can be reproduced by paper-button/demo.html, which is run by telemetry bots as per https://code.google.com/p/chromium/issues/detail?id=563504#c16

See more details here: https://code.google.com/p/chromium/issues/detail?id=563504#c18

Copied from original issue: Polymer/polymer#3219

[ebidel]

maybe @cdata @valdrinkoshi @notwaldorf could take a look?

[zmoshansky]

Also note previous discussion https://github.com/Polymer/paper-ripple/issues/10. Looks great on desktop, although on Android (Zenfone2) the ripple is very janky. Needs much more butter.

Aside: That being said, I'm truly blown away (figuratively) by how smooth iron-animated pages and iron-list are on mobile. In a ~1.2 MB app (html & js, pre-gzip), this is one of the few areas that gives away that it could be running non-native. So kudos to the team for that and all the hard work.

[ebidel]

ping

[kristfal]

I'll jump the bandwagon and ping again. Any movement? Would a PR be welcome, or would you prefer doing this in house?

[ebidel]

I think a PR would be welcome at this point :)

[danbeam]

@tjsavage

[danbeam]

/cc @frankiefu as well

some ideas:

1. detect whether Element#animate() exists and use it
2. set less .style properties (i.e. only set a 2D webkitTransform in Safari and skip duplicative .style.transform which was unprefixed in Chrome 36)
3. set .style values to the destination radius and rely on transition or @keyframes rather than continually using requestAnimationFrame (and canceling on up by changing .style.animationName or the .style.transition properties, possibly polyfilling transitionend for cancels)

[LarsDenBakker]

Any update on this?

[danbeam]

I haven't been pushing on this hard because Chrome wrote it's own ripple via Web Animations API (i.e. Element#animate). https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chromium/paper-ripple/

@blasten wrote a few branches with faster ripples which might actually work in other browsers: https://github.com/PolymerElements/paper-ripple/compare/fast-ripple https://github.com/PolymerElements/paper-ripple/compare/fast-ripple-2

[LarsDenBakker]

That's useful information, thanks!