bug: Android native scrolling strange behaviour

[CheetahDev]

Type: bug

Platform: android 4.4 webview

Hi,

I've been using Ionic' native scrolling since it has been released, but I disabled it in the last version due to #3727.
I saw the 1.0.1 update yesterday and I tried it as soon as I arrived at work. I re-enabled native scrolling and... boom... huge bug/strange behaviour.

Sometimes scroll is working, sometimes not (depending on the touched element, etc.).

Easiest way to reproduce:

1. ionic start whatever sidemenu
2. cd whatever
3. ionic platform add android
4. Edit playlists.html as follow:

<ion-view view-title="Playlists">
  <ion-content>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
  </ion-content>
</ion-view>

5. Edit app.js (replace ".config" line) as follow:

.config(function($ionicConfigProvider, $stateProvider, $urlRouterProvider) {

  if(ionic.Platform.isAndroid()) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
  }

6. ionic run android

Infos:

• LG G3
• Stock Android 4.4.2

J.

[jskrzypek]

@CheetahDev, this might also partly be coming from the same problem as what we're seeing in ios in #4008.
The fix for it would be to add the following code to your app in order to override the wonky drag handler. Can you try it out and let me know what happens?

.run(function() {
    ionic.Gestures.gestures.Drag.handler = function dragGesture(ev, inst) {
        if(ev.srcEvent.type == 'touchstart' || ev.srcEvent.type == 'touchend') {
            this.preventedFirstMove = false;

        } else if(!this.preventedFirstMove && ev.srcEvent.type == 'touchmove') {
            // Prevent gestures that are not intended for this event handler from firing subsequent times
            if(inst.options.prevent_default_directions.length > 0 && inst.options.prevent_default_directions.indexOf(ev.direction) != -1) {
                ev.srcEvent.preventDefault();
            }
            this.preventedFirstMove = true;
        }

        // current gesture isnt drag, but dragged is true
        // this means an other gesture is busy. now call dragend
        if(ionic.Gestures.detection.current.name != this.name && this.triggered) {
            inst.trigger(this.name + 'end', ev);
            this.triggered = false;
            return;
        }

        // max touches
        if(inst.options.drag_max_touches > 0 &&
            ev.touches.length > inst.options.drag_max_touches) {
            return;
        }

        switch(ev.eventType) {
            case ionic.Gestures.EVENT_START:
                this.triggered = false;
                break;

            case ionic.Gestures.EVENT_MOVE:
                // when the distance we moved is too small we skip this gesture
                // or we can be already in dragging
                if(ev.distance < inst.options.drag_min_distance &&
                    ionic.Gestures.detection.current.name != this.name) {
                    return;
                }

                // we are dragging!
                if(ionic.Gestures.detection.current.name != this.name) {
                    ionic.Gestures.detection.current.name = this.name;
                    if(inst.options.correct_for_drag_min_distance) {
                        // When a drag is triggered, set the event center to drag_min_distance pixels from the original event center.
                        // Without this correction, the dragged distance would jumpstart at drag_min_distance pixels instead of at 0.
                        // It might be useful to save the original start point somewhere
                        var factor = Math.abs(inst.options.drag_min_distance / ev.distance);
                        ionic.Gestures.detection.current.startEvent.center.pageX += ev.deltaX * factor;
                        ionic.Gestures.detection.current.startEvent.center.pageY += ev.deltaY * factor;

                        // recalculate event data using new start point
                        ev = ionic.Gestures.detection.extendEventData(ev);
                    }
                }

                // lock drag to axis?
                if(ionic.Gestures.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance <= ev.distance)) {
                    ev.drag_locked_to_axis = true;
                }
                var last_direction = ionic.Gestures.detection.current.lastEvent.direction;
                if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
                    // keep direction on the axis that the drag gesture started on
                    if(ionic.Gestures.utils.isVertical(last_direction)) {
                        ev.direction = (ev.deltaY < 0) ? ionic.Gestures.DIRECTION_UP : ionic.Gestures.DIRECTION_DOWN;
                    } else {
                        ev.direction = (ev.deltaX < 0) ? ionic.Gestures.DIRECTION_LEFT : ionic.Gestures.DIRECTION_RIGHT;
                    }
                }

                // first time, trigger dragstart event
                if(!this.triggered) {
                    inst.trigger(this.name + 'start', ev);
                    this.triggered = true;
                }

                // trigger normal event
                inst.trigger(this.name, ev);

                // direction event, like dragdown
                inst.trigger(this.name + ev.direction, ev);

                // block the browser events
                if((inst.options.drag_block_vertical && ionic.Gestures.utils.isVertical(ev.direction)) ||
                    (inst.options.drag_block_horizontal && !ionic.Gestures.utils.isVertical(ev.direction))) {
                    ev.preventDefault();
                }
                break;

            case ionic.Gestures.EVENT_END:
                // trigger dragend
                if(this.triggered) {
                    inst.trigger(this.name + 'end', ev);
                }

                this.triggered = false;
                break;
        }
    };
})

[CheetahDev]

@jskrzypek your fix seems to work well! Waiting for a response from Ionic' team. Sad to see that native scrolling doesn't work properly in two consecutive releases. 😞

[jskrzypek]

Awesome! Should we merge this issue with #4008?

[mhartington]

Moving this over to #4008

[krlwlfrt]

@jskrzypek, your code fixed it for me on android 4.4. but with the side effect that I can now scroll vertical lists a few pixels left and right.

[mlynch]

Review revert fix in #3695 for 1.2.2

[mlynch]

This appears to be an issue with the side menu content area specifically. The drag handler on the side menu interacts with the content touch events

[mlynch]

Fixed. Will be out in 1.2.2

[mlynch]

Reopening, need a slightly different approach to ensure no issues with iOS

[danbucholtz]

Hi @CheetahDev,

Are you still seeing an issue here? What am I supposed to be seeing on my device when I follow your steps? Everything seems fine on my device. Is there a particular action I should be taking?

Please let me know.

Thanks,
Dan

[jgw96]

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!