FlexScrollView doesn't response to the touch velocity

[mutazmq]

Below is how I initiate FlexScrollView. However, when I scroll it on my android device, it doesn't seem to response to the scroll velocity. In other words, the motion speed stays the same even though my scroll is fast. There is lagging, is this normal or I'm doing something wrong? Thanks

    this.scrollView = new FlexScrollView({

        properties: {
            overflow: 'hidden'
        },
        layoutOptions: {
            margins: [15, 15, 15, 15],
            spacing: 3
        },
        flow: true,
        alignment: 1,
        mouseMove: true,
        autoPipeEvents: true,
        debug: false,
        useContainer: true,
        container: { // options passed to the ContainerSurface
            properties: {
                overflow: 'hidden',
                backgroundColor: 'black',
                boxShadow: '0 0 20px rgba(0,0,0,0.5)'
            }
        }

    });

[IjzerenHein]

Hi, I see you are using both autoPipeEvents and a container. When using a container you typically don't need autoPipeEvents. Could you try removing autoPipeEvents? Also, the properties option does not exist in the root of the FlexScrollView, so it doesn't do anything and you can remove it. Please change to:

this.scrollView = new FlexScrollView({
        layoutOptions: {
            margins: [15, 15, 15, 15],
            spacing: 3
        },
        flow: true,
        alignment: 1,
        mouseMove: true,
        debug: false,
        useContainer: true,
        container: { // options passed to the ContainerSurface
            properties: {
                overflow: 'hidden',
                backgroundColor: 'black',
                boxShadow: '0 0 20px rgba(0,0,0,0.5)'
            }
        }
    });

Also concerning Android. Are you using the latest chrome version and/or crosswalk. If not, I strongly recommend using that, it makes a lot of difference in terms of performance.

[mutazmq]

I'm using Cordova. With the new code you pasted, lagging is still there! Any idea? Thanks

[mutazmq]

The whole code I'm using to create scroll view and to add services to it is:

    this.scrollView = new FlexScrollView({
            layoutOptions: {
                margins: [15, 15, 15, 15],
                spacing: 3
            },
            flow: true,
            alignment: 1,
            mouseMove: true,
            debug: false,
            useContainer: true,
            container: { // options passed to the ContainerSurface
                properties: {
                    overflow: 'hidden',
                    backgroundColor: 'black',
                    boxShadow: '0 0 20px rgba(0,0,0,0.5)'
                }
            }
        });

    var viewSequence = new ViewSequence();

    for(var i=0; i< 10; i++){
        var background = new Surface({
            content: '<h1>' + i + '</h1>',
            size: [undefined, 200],
            properties: {
            backgroundColor: 'gray'
            }
        });
        viewSequence.push(background);
        background.pipe(this._eventOutput);
    }

    this.scrollView.setDataSource(viewSequence);
    this.layout.content.add(this.scrollView);

[mutazmq]

To be more clear, I don't think it is because of the device. The motion is smooth but it is not proportional to the touch velocity. Do you use FlexScrollView to develop for Cordova?

[mutazmq]

The issue becomes more obvious when you do two or three scrollings up and down. I haven't worked with crosswalk, will try it today. But what about IOS? Will I have same performance issues?

[IjzerenHein]

I honestly don't quite understand what you mean by 'touch velocity'. When scrolling, while the finger is on the screen, the scrollview should track that finger exactly. And when you release it, it should take the current velocity and scroll the view in that direction. Could you try to explain the problem in smaller step by step chunks or maybe even include a cam recording of the problem including your finger touching the screen?

As far as scrolling on iOS, that seems to be just fine on all devices ranging from iPhone 4 to 6+. Faster devices are obviously smoother. Be careful though when testing on the iOS simulator though, The simulator has become quite laggy in the latest major version of XCode, so it doesn't paint a realistic picture.

As for Android and cordova. By default, cordova on Android uses the webview that comes installed with the Android version on your phone. This may very well be an older version. The reason Crosswalk was developed, is to be able to run the latest chrome version inside your cordova app which can have huge performance gains, especially when the default webview on your Android device is older. All the famo.us cordova Android apps I have worked on and seen other people build, use Crosswalk because of this reason.

Have you tried running your example inside the latest Chrome version on your Android phone? What Android phone are you using btw?

[mutazmq]

Thanks for the reply. Here is a link to a video I recorded. Hope it is clear though.

If you can notice in the video how scrolling doesn't match with the speed of my finger touch. I move my finger much faster than famo.us scrolling. It is not responding to the speed of my finger motion. However, if I move my finger in kind of slow motion, scrolling tracks my finger exactly. Sometimes, user would like to scroll fast and thats why they do it with fast motion on the screen, but famous doesn't seem to be successful doing so.

What I mean is quite noticeable at the end of the video.

I tried if on chrome browser on my mobile, there seems to be a minor performance gain, but still far away from native. My device is Galaxy s4, 4.4.2.

So what do you think? Many thanks

BTW, crosswalk-cordova is ok for this performance issue? It sounds ok from their website.

[IjzerenHein]

Hi, that indeed seems quite laggy. Could you share your famo.us demo online, so I can run some tests with it? Also, are you running the default webbrowser of your S4 or on Chrome?

[IjzerenHein]

Also, just wondering. Have you tested with the stock famo.us Scrollview? What performance are you seeing with that? Is it similar?

[mutazmq]

Yes sure, it is just the Famous demo with ScrollView addition. Here we go. On my device, I run both bowsers. However, my aim is creating an app (Cordova or Crosswalk). The video you watched is running on Cordova app. When I ran it on my device Chrome browser, there was some performance improvement but not good still, lagging!!

In the repo I shared, please go to ./app/src/PageView.js. From line 47 to 83 is your FlexScrollView commented out. From line 85 to 103 is Famous ScrollView. Please feel free to switch between the two blocks when you experiment.

Many thanks

[IjzerenHein]

Hi, thanks for all the info. Haven't gotten around to look into this, will keep you posted.

[mutazmq]

Many thanks. Is Cordova-crosswalk good to use? Same like crosswalk performance alone?

[IjzerenHein]

Hi, I had a closer look, these are my results:

It seems that using a ContainerSurface on the S4 creates additional lag. I've created several examples in order to compare the flex-scrollview with the stock famo.us scrollview, both with and without a ContainerSurface:

• http://gloey.nl/apps/scrollview (stock famo.us scrollview with ContainerSurface overflow:hidden)
• http://gloey.nl/apps/scrollview2 (stock famo.us scrollview without any ContainerSurface)
• http://gloey.nl/apps/scrollview3 (FlexScrollView with ContainerSurface)
• http://gloey.nl/apps/scrollview4 (FlexScrollView without any ContainerSurface)

Furthermore, concerning the "touch velocity" thing. When you quickly fling your finger over the screen, it sometimes doesn't seem to register the expected velocity. I see this with both the stock famo.us and FlexScrollView. After debugging, it seems that the javascript "touch" events are not very accurate. Sometimes the last two "touchmove" events are very close together (in terms of time). These last two events are used to calculate the velocity. I'm sure whether this is because of the device itself or the browser.

Furthermore, comparing my S4 with your video, it seems that mine is a lot more responsive and smooth...

Does any of this makes sense?

[IjzerenHein]

ping @mutazmq