Ionic-framework: ionScroll ScrollEvent not enough fast on real devices

[peterpeterparker]

Ionic version:
2.4

I'm submitting a ...
bug

Current behavior:
Subscribing to the content.ionScroll works fine when user scroll slowly a page. As soon as he scroll faster, like when he want to reach back the top of a long page, the event isn't emitted enough often or don't produce enough steps.

This behavior should be reproduced on a real device, like an iPhone 6 or 7 with iOS 10.2.

Expected behavior:
Even if the user scroll fast on a real device, the event ionScroll should be emitted multiple times and fast.

Steps to reproduce:
Create a page with an enough long scroll. Scroll "fast" (like when you know that you want to reach the end or the start of the page).

Related code:

content.ionScrollStart.subscribe(($event: any) => {
        console.log('ionScrollStart:');
        console.log($event);
    });

    content.ionScrollEnd.subscribe(($event: any) => {
        console.log('ionScrollEnd:');
        console.log($event);
    });

    content.ionScroll.subscribe(($event: any) => {
        console.log('ionScroll:');
        console.log($event);
   });

Log:

Here logs from a long page when I scrolled from down to up fastly. As you could see, the scrollTop did a big jump between 503 and 0!

998
976
934
874
774
654
503
0

2017-01-06 10:31:52.161763 MyApp[304:16273] ionScrollStart:
2017-01-06 10:31:52.161929 MyApp[304:16273] {"timeStamp":1483695112156,"scrollTop":998,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.162019 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.162187 MyApp[304:16273] {"timeStamp":1483695112156,"scrollTop":998,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.176840 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.177002 MyApp[304:16273] {"timeStamp":1483695112173,"scrollTop":976,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-22,"deltaX":0,"velocityY":21.568627450980394,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.191398 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.191540 MyApp[304:16273] {"timeStamp":1483695112188,"scrollTop":934,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-64,"deltaX":0,"velocityY":33.333333333333336,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.206892 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.207035 MyApp[304:16273] {"timeStamp":1483695112204,"scrollTop":874,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-124,"deltaX":0,"velocityY":43.055555555555564,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.228568 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.228728 MyApp[304:16273] {"timeStamp":1483695112221,"scrollTop":774,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-224,"deltaX":0,"velocityY":57.435897435897445,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.256464 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.256606 MyApp[304:16273] {"timeStamp":1483695112239,"scrollTop":654,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-344,"deltaX":0,"velocityY":69.07630522088354,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.265168 MyApp[304:16273] ionScroll:
2017-01-06 10:31:52.265316 MyApp[304:16273] {"timeStamp":1483695112255,"scrollTop":503,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-495,"deltaX":0,"velocityY":83.33333333333334,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:52.353692 MyApp[304:16273] ionScrollEnd:
2017-01-06 10:31:52.353830 MyApp[304:16273] {"timeStamp":1483695112255,"scrollTop":503,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":998,"startX":0,"deltaY":-495,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:53.245781 MyApp[304:16273] ionScrollStart:
2017-01-06 10:31:53.246043 MyApp[304:16273] {"timeStamp":1483695113228,"scrollTop":0,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":0,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:53.246206 MyApp[304:16273] ionScroll:
2017-01-06 10:31:53.246426 MyApp[304:16273] {"timeStamp":1483695113228,"scrollTop":0,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":0,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}
2017-01-06 10:31:53.340995 MyApp[304:16273] ionScrollEnd:
2017-01-06 10:31:53.341256 MyApp[304:16273] {"timeStamp":1483695113228,"scrollTop":0,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":0,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"up","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{"__zone_symbol__eventTasks":[]},"headerElement":{}}

Ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[AndreasGassmann]

Can you wrap it in a zone and try again?

this.content.ionScroll.subscribe(($event) => {
   this.zone.run(() => {
       // console.log($event);
   });
});

[peterpeterparker]

@AndreasGassmann sure ... how do I wrap a zone aka where do this.zone comes from aka how should I declare zone?

[AndreasGassmann]

You have to import NgZone from the angular core.

import { NgZone } from '@angular/core';

export class myPage {
  zone: NgZone;

  constructor() {
    this.zone = new NgZone({enableLongStackTrace: false});
  }
}

[peterpeterparker]

Thx your for the idea @AndreasGassmann unfortunately didn't improved. See logs, on a "fast" scroll to the top, the ionScroll relative to your code proposition emitted only two times

1."scrollTop":1063
2."scrollTop":0

2017-01-06 14:43:45.976138 MyApp[239:5462] {"timeStamp":1483710225906,"scrollTop":1063,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":1063,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{},"headerElement":{}}
2017-01-06 14:43:47.099165 MyApp[239:5462] {"timeStamp":1483710227055,"scrollTop":0,"scrollLeft":0,"scrollHeight":668,"scrollWidth":375,"contentHeight":603,"contentWidth":375,"contentTop":64,"contentBottom":0,"startY":0,"startX":0,"deltaY":0,"deltaX":0,"velocityY":0,"velocityX":0,"directionY":"down","directionX":"right","fixedElement":{},"scrollElement":{},"contentElement":{},"headerElement":{}}

[comfortme]

same issue for me.

[peterpeterparker]

WkWebView fixed my issue. Tested on real iPhone 6 and iPhone 4S, both fast scrolling were well handled. Therefor I allow myself to close this issue I opened since I don't need another solution.

Note: With XWalk on my Android device, fast scrolling are also well handled.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.