bug: Vertical Scrolling In Slidebox Slide Too Sensitive

[JeffreyJamesAttenti]

Type: bug

Platform: android 4.4 webview

I have a slidebox and each slide is setup to vertically scroll. With ionic 1.0.1. on an android 4.4.4 device, vertical scrolling is too sensitive. It appears that the slidebox detects the user is moving horizontally and locks as a horizontal scroll.

To best describe it, the user's finger will not be moving in a perfectly vertical motion when a device is held (it's going to be somewhat diagonal) and I think that the locking mechanism doesn't handle that well.

I have created a codepen at http://codepen.io/anon/pen/waQxRj and it has been tested on a galaxy s5 with 4.4.4. I have also created a video to demonstrate the bug and strange behavior https://youtu.be/6D5RySbU5Mg

Update: This is happening on a 5.0.1 device so I believe this may be 4.4.4 and above. Version 4.4.2 seems to work fine.

[alyxb]

+1 I'm having the same issue on Android 5.0.1

[wibbleboy]

I have the same problem with the horizontal gestures being apparently overly sensitive. I have a ion-slide-box containing three ion-slides, and each slide contains an ion-scroller.

Galaxy Note 3 - Android 5.0: To enable vertical scrolling, large movements and fast swipes need to be within 10 degrees of vertical. For smaller movements you need to be almost perfectly vertical, otherwise the sideways slidebox kicks in.

HTC Desire X - Android 4.1.1: Works fine.

HTC One X - Android 4.2.2: Works fine.

If there's no simple solution for this problem, perhaps a configurable "dead zone" could be added to the slide box to mitigate the issue?

[Tharamm]

I have the same problem with Nexus 9 - Android 5.0.1

[stefankp]

I have the same problem on a One Plus One and Android 5.0.1.

[subeebot]

We have the same issue, with Android 5.0.1 on a Samsung S3

[CheetahDev]

Same issue on a LG G3 (4.4.4 and 5.x)

[edospadoni]

Same issue on Nexus 5 (5.x)

[hun-ho]

Same issue on S6 5.1.1

[codelero]

I started to experience this problem on 4.2.2 until after moving to Crosswalk. It's near impossible to scroll using an ion-content directive within a ion-slide directive.

[codelero]

As a quick fix for now I've commented out freezeAllScrolls(true) found here in the source code. https://github.com/driftyco/ionic/blob/master/js/angular/directive/slideBox.js#L2

onDrag: function() { freezeAllScrolls(true); }

It's not perfect as it allows scrolling in both directions (although much better than before). I will likely come back and add a test to the scrolling event within the ion-content directive.

[wlw362034710]

same pro on samsungA7 android 4.4.4

[wlw362034710]

hmm, as a hack i added these into method 'touchmove' in ionic.bundle.js:

if ((Math.abs(delta.x) / Math.abs(delta.y)) < 4) { event.preventDefault(); return; }

[agregoris]

Same problem on LG G3 Android 4.4 using Crosswalk as well.

[tillmannheigel]

Same problem here on S5 CM 12.1

[Shinzah]

Same here, OPX OxygenOS 5.1.1

[tillmannheigel]

Hey Shinzah,

I fixed this bug by adding a few directives to my ion-scroll view...

<ion-scroll on-touch="onTouch()" on-release="onRelease()" on-swipe-left="nextSlide()" on-swipe-right="previousSlide()">

...and these methods to my controller.

$scope.onTouch = function(){ $ionicSlideBoxDelegate.enableSlide(false); };

$scope.onRelease = function(){ $ionicSlideBoxDelegate.enableSlide(true); };

$scope.nextSlide = function() { $ionicSlideBoxDelegate.next(); };

$scope.previousSlide = function() { $ionicSlideBoxDelegate.previous(); };

Its just a workaround, but as it produces a more user friendly ux I finally can sleep in peace ;).

Tillmann

[mlynch]

Can you try the new slidebox? Scrolling in the new slidebox is a lot better, especially when paired with the delectable new native scrolling on by default. It's in master and will land in 1.2:

Hey everyone, we just landed a new slider component that solves this issue. It's in master and will be in 1.2 To use it today, do this:

Will be back porting the delegate to work with it soon, but going to close since this should be solved now.

<ion-slides options="options" slider="data.slider">
  <ion-slide-page>
    <ion-content>
    </ion-content>
  </ion-slide-page>
</ion-slides>

[thierce]

Slide-box vs ion-slides. I could not find documentation on ion-slides. Do you have a full example of what we should be using with ion-slides?