Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

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

Open
blasten opened this issue Apr 20, 2016 · 1 comment

Comments

@blasten
Copy link
Contributor

blasten commented Apr 20, 2016

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
Copy link

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. PERF: paper-ripple sets transform every frame instead of using accelerated animation #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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants