Iscroll performance issues on android

[gliheng]

Recently I did some iscroll performance analysis on android. I even wrote my own scroller for comparison. To my surprise, iscroll perform badly when scrolling many dom elements. tested on several native browser on android 4.0 4.1 phones. (chrome for android does not reproduce the issues.)

After some timeline analysis, I found iscroll have this transition: 0ms on the scroll container. With it, browser still fire transition end events and have long recalculate style duration. Even though, it shouldn't. I guess, it's a bug with android browsers triggered by 0 transition.

I removed the transition: 0ms css property, and it actually perform better. I think you need to remove the transition when it's not needed, instead of leaving it at 0ms.

Have a look at this slide, showing some of the timeline I recorded. https://www.icloud.com/iw/#keynote/BAKqc5x-NqumGyFYKiOBNw7XGVRo4Y1Nm9KF/iscroll_performance

These are test pages I use. http://static.pyco.me/scroll/iscroll.html http://static.pyco.me/scroll/xscroller.html

[borhub]

Wondering if this is might be related to my bug https://github.com/cubiq/iscroll/issues/780 @gliheng can you try my proposed solution in #780 and report back if you still see issues?

[gliheng]

Unfortunately, that solution does not fix the problem here. Instead of leaving the transition at 0s. We need to remove it altogether when it's not needed.

this.scrollerStyle[utils.style.transitionDuration] = '';

[tasosno1]

What settings do you have for your Iscroll?. The below are the ones am using with android webview whith enabled Hardware Acceleration. The iscroll feels like a native App scrolling. So probably on the devices and Browsers you are testing with, Hardware Acceleration is not enabled or not available. If you set useTransition to false the performance is very bad

                scrollX: false, 
                scrollY: true
                ,click:true // open click event
                ,scrollbars: true
                ,fadeScrollbars: true 
                ,useTransform: true
                ,useTransition: true
                ,mouseWheel:true

[leohxj]

@tasosno1 In my project, which is a page imbedded in a webview, the horizontal scroll is tremulous(maybe called shake). I use Transition to false, it performance well.

Below is my setting:

                            scrollX: true,
                            scrollY: false,
                            tap: true,
                            eventPassthrough: true,
                            useTransform: false,
                            useTransition: false