Ionic-framework: ion-scroll horizontal scroll not working on Android & Browser

[ernofi]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I have the following code in my app:

<ion-scroll scrollX="true" id="lines">
        <div class="line" *ngFor="let line of lines" (tap)="selectLine(line)">{{ line }}</div>
</ion-scroll>

It should allow to scroll horizontally but it's not working on Android. With iOS everything goes fine.

It generates the following HTML:
touch-action: pan-y;

<div class="line" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Expected behavior:
It should generate:
touch-action: pan-x;

<div class="line" style="touch-action: pan-x; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v5.8.0
Xcode version: Xcode 8.2 Build version 8C38

[royipressburger]

Having the same issue. This worked on rc3 and stoped on rc4

[SleimanB]

Yes Me To Having the same issue. This worked on rc3 and stoped on rc4

[jgw96]

Hello! What version of Android are you guys experiencing this issue on? Unfortunately i cannot reproduce this issue on a Moto X 2014 running Android 5.1.1, Nexus 7 running Android 6.0.1 or a Nexus 6 running Android 7.1.1.

[SleimanB]

Hey @jgw96 Well Im using Samsung Android 6.0.1 And Samsung Android 5.0.1, My Code

 <ion-scroll scrollX="true" style="margin-top: 25px;" class="horizontal-categories"> 
    <ion-row>
      <ion-colwidth-30 class="horizontal-item"  *ngFor="let branchTop of branchListTop" >
        <preload-image [ratio]="{w:1, h:1}" [src]="branchTop.business.imageURL"  title="" class="top-    branch-img"></preload-image>
        <p color="violet" ><b>{{ branchTop.business.name }}</b></p>
        <p class="item-description">{{ branchTop.address }}</p>
      </ion-col>
    </ion-row>
  </ion-scroll> 

RC3 Worked 100%

[ernofi]

Hello, @jgw96 ! I'm using Huawei Honor 7 with Android 6.0.

I temporarily fixed this issue in my app by adding following line to the .scss file
.line { touch-action: pan-x !important; }

[jgw96]

Hello everyone! Is this still an issue with the 2.0 release yesterday?

[ernofi]

Hello @jgw96 !

Still having the problem. App is running on the Android but debugging with Chrome developer tools.

This time I'm using Galaxy J5 with Android 6.0.1. Ionic is updated to version 2.0.0.

I recorded short video to YouTube: https://youtu.be/qdHWyQbrJWI

[gongalt]

Hi, did anyone get this fixed?

[JWesorick]

Still having this problem for me in the browser with 2.0.

Edit: Realized it works with a two finger scroll on my track pad, but not with a click and drag or a scroll using my usb mouse.

[n40jpj]

Any answers to this, it was working in rc5 but not working in 2.1.0, any fixes yet?

[Arnaud49]

Hi here, having this problem too. Still nothing to fix it ? I even try the fix proposed with touch-action but it doesn't work.

[SleimanB]

can you please @Arnaud49 provide us your code ? cz for me now its worked like a charm

[HugoHeneault]

I still have this bug. Anyone managed to get it working on > 3 ?

[saschwarz]

Still an issue in Ionic 3.92 on Android devices. Inspired by https://github.com/hammerjs/hammer.js/issues/1050#issuecomment-269492755 I needed x-y pan and this SCSS worked for me:

    .scroll-content {
        touch-action: pan-x pan-y !important;
        * {
            touch-action: pan-x pan-y !important;
        }
    }

[miquelferrerllompart]

Some update for this bug?

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/155