Laggy transition of ripple and selectionBar inside paper-tabs when rendering too long list on Chrome Android

[blasten]

Expected outcome

Ripple animation runs smoothly when clicking on tabs that renders very long list on Chrome Android. Selection bar runs smoothly when new tab is selected.

Actual outcome

Rendering too long list causes laggy ripple animation in paper-tabs. Rendering too long list causes selection bar to not transition smoothly to the selected tab that renders long list.

Demo to reproduce on Chrome Android.

http://jsbin.com/darugukavi/1/edit?html,output

[kristfal]

There are two issues here:

1. DOM manipulation is happening on the main thread in browsers, which means that any heavy DOM manipulation will result in janky animations.

2. https://github.com/PolymerElements/paper-ripple/issues/67 to a lesser extent.

In all earnest, you really only have one option if you want fully smooth animations, and that is to defer the DOM manipulation until after the animation is finished.