Yes I used to face the same issue. If you actually open chrome dev tools and look at frames tab under timeline while you keep firing some events like scroll or basic transitions you can have a look at FPS and rendering time. FPS should be around 60FPS for glitch free animations and 16ms of processing time for each frame.
This is very hard to achieve. I mean in 16ms the browser should:
- Interpret JS; Yellow line
- Parse HTML and Read and Write network data; blue line
- Re-calculate Style Rules and DOM layout; Purple line
- Re-paint the updated layout; Green Line.
All these tasks should be achieved for every frame rendering and within 16ms for butter smooth animation.
So first, make sure you don’t have high obstructive JS in your code. Optimize it as much as possible. Use requestAnimationFrame to carry out animations and it adds more optimization.
Parsing minified HTML is easier. So make sure your production app contains minified HTML.
Use CSS3 animations if it does the job. Under Chrome Android, CSS animations run in parallel with frame rendering. So you need not worry about blocking issues. So whenever you can use CSS3 animations.
Don’t try to add heavy DOM manipulation work when UI events like scroll or transitions are being fired.
Remove most of the unwanted elements from the DOM. Use CSS3 animations whenever you can. Because CSS animations does not block frame rendering process. Keep it as simple as possible. Even with the Chrome Canary web-view, 1.4 GHz Quad Core Processor, Average GPU and about a gig of RAM apps will appear slow and glitchy if you don’t optimize it as much as possible.
For example, an app used to suffer terribly while scrolling inside a modal. Someone observed that, even when my modal was static and no events were being fired the scroll appeared glitchy. The culprit was an animated icon that was in the view behind the modal.
You get my point right?
But having said that, Ionic in my opinion is the best mobile UI framework.