Ionic-framework: Click is more sensitive on `<ion-scroll>` items than elsewhere

[tylermakin]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x
[ ] 3.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:
When scrolling through items in a <ion-scroll> element, items are clicked far too easily. The threshold to click an item is significantly more sensitive than on other scrollable elements, such as elements inside a scrollable <ion-content>. This results in unwanted clicks when attempting to scroll.

Expected behavior:
Elements within an <ion-scroll> should be clicked with the same sensitivity as other elements throughout Ionic.

Steps to reproduce:
Place clickable items within an <ion-scroll> element.

Example, only changed the code inside <ion-content>: http://embed.plnkr.co/zjWMmd/

Related code:

<button
  ion-item
  menuToggle
  *ngFor="let x of [1,2,3,4,5,6,7,8,9]">
  Item {{x}}
</button>

<br><br>

<ion-scroll style="height:250px;" scrollY="true">
  <button
    ion-item
    menuToggle
    *ngFor="let x of [1,2,3,4,5,6,7,8,9]">
    Item {{x}}
  </button>
</ion-scroll>

Other information:
This has been tested only on iOS devices.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

[tylermakin]

Issue appears when specifying a function with (click)="yourFunction()" or an Ionic behavior such as menuToggle.

Issue does not occur when using (tap)="yourFunction()". Tap event seems to behave normally in an <ion-scroll> element, unlike (click) which is more sensitive in an <ion-scroll> than in <ion-content>

[jgw96]

Thanks for using Ionic! We will look into this.

[tlaverdure]

I've noticed the same issue. When on a list tapping an item in a list while trying to scroll causes a clicks on an item. This would feel more native if there was a slight timeout when tapping on a list item with a click function applied to the ion-item.

[pjc2007]

I get this as well, and this seems to be more on iOS for my case. So if you flick the list, and then stop it the click (or tap) can trigger. Or sometimes it will trigger when you just go to scroll.

On Android the click triggers often when you try to strop a scroll.

An even bigger issue I have here as well is that if I pass up data from the element tapped, I actually get data from the item that was used to start the scroll, rather than the item tapped.

My Ionic info...

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.1.2 ios 4.3.1 windows 4.4.3
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.1
ios-sim    : 5.0.13

It is better behaved if I don't use a button, or the tappable attribute...

   <ion-scroll scrollX="false" >    
       <div *ngFor="let item of data"  tap='myTap(item)'>  
     ...

but then the clicks are a little too slow..

[dani-digital]

We've had the same issue, now using "tap" directive, which seems to fix the issue. Thanks @tylermakin .

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!