Ionic-framework: Ionic 3 content does not scroll when you add tap gesture

[AhabweEmmanuel]

This works fine

This does not work....scrolling fails

This also does not work....scrolling fails

[javico2609]

hi, i have the same bug, first i thinking was the ionic 3 update but a test an remove (tap) event an everything work fine

issue 11050

[tonirilix]

Thanks for opening this issue.
I replaced tap event with click event and now it's working fine.

I had some issues before with click event that's why I was using tap.

[goleary]

I'm having this issue too. I use both 'tap' and 'press' on my componenents so using click is not an option unless I stop using that press event as as well.

Any other workaround short of reverting to the previous version of Ionic?

[AhabweEmmanuel]

Yup I also use both press and tap. Even swipe gesture brings some inconsistencies on scrolling...it works and then breaks.....

[conradoac]

Same here! But only with Android device - testing with Xperia M4 Android 5.0.
I´m using WKWebView, so I´m not sure if this problem occurs also on iOS with UIWebView.

[peterpeterparker]

This issue #11137 sounds related too btw.

[lincolnthree]

I also have this problem using an where the items have a (press) gesture attached.

[lincolnthree]

I honestly can't figure out what makes one of my pages different than the others. It works on one, but does not work on another. It seems that whatever element has the (press) gesture attached cannot be used to scroll the content.

[phillipcurl]

For me, this was occurring when using the (tap) event on an <ion-item> within an <ion-list>. Changing that event to (click) resolved the issue for me. It's also important to mention that scrolling was only affected on Android. iOS scrolling of an <ion-list> with a (tap) event on each <ion-item> was working fine.

[peterpeterparker]

For me the problem was most probably finally not related to this issue. After hours and days I figured out that, if you are using like me the module SwingModule (angular2-swing), for an unknown reason, if you use the (swipe) event on a scroll or list, even not in the same page as where you are using the swing itself, the scroll or list gonna be frozen respectively not scrollable on iOS and Android devices.

If I remove the SwingModule from my imports in app.module, then scroll and list combined with an event (swipe) are scrollable too again.

P.S.:

Opened an issue, cause I've got no idea how to fix it, in the angular2-swing project

https://github.com/ksachdeva/angular2-swing/issues/26

Also if someone want to have fun, here a sample project to reproduce the problem (update: on android)

https://github.com/peterpeterparker/myIonScroll.git

Update: See #11344

[lincolnthree]

I'm not using swing, just for the record. Just a (press) event.

[GeeKanJi]

Hello,

I have the same issue here:

<ion-list [virtualScroll]="dataArticlesFiltered_ToView" approxItemHeight="200px"
                              approxHeaderHeight="0px" approxFooterHeight="0px" approxItemWidth="100%"
                              virtualTrackBy="trackByArticles">

                        <ion-card *virtualItem="let article;let idx = index"
                                  (click)="ViewArticle($event, article, null)"
                                  (swipe)="SwipeArticle(article, $event, index)"

                                  [@animateState]="article.animate"
                                  class="article-ion-card article-ion-card-onecolumn"
                                  [ngClass]="{'articleRead_AdaptiveView': (article.hide && viewType != 'HiddenNews') || (article.read && viewType != 'ReadNews') }">                            
                            <ArticleViewAdaptive [article]="article"></ArticleViewAdaptive>
                        </ion-card>
                    </ion-list>

With (swipe) event => Scroll is not working
Without (swipe) event => Scroll is working

There was a similar issue with a previous version #8109

[armeniopinto]

I am having the same problem (Ionic 3.0.1, Angular 4.0.0). This happens with any combo of 2 or more events (click and swipe, for example).

List scrolling was working just fine in Ionic 2 and it's now broken after upgrading.

Some code here to illustrate the problem.

[synga]

I'm having the same issue. Most of people commenting here got this using *ngFor, i tried hard coding some cards with a press and when the cards reach the bottom of the screen (like 4 or 5 cards) the scrolling doesn't works, but when it has only 2 or 3 itens and they don't reach the bottom of the page the scrolling works fine. Using (tap) or (press) or both of then in a haven't altered anything.

[osmarjunior]

I'm having this issue too. When I use the (swipe) the scroll stop working on Android.

[jgw96]

Hello, all! Just wanted to update this issue. I will be adding this one to our list of issues to consider for the next release milestone.

[peterpeterparker]

I didn't had this issue with (tap) but I had frozen/blocked scrollers on Android and iOS devices when using (click) and (swipe) inside ion-scroll/ion-list for a while now respectively since the introduction of Ionic 3.

But guess what, it's now solved (I tested the issue in my app on real devices, iPhone 6, Nexus 5X and Samsung Edge)!

Don't know why because I wasn't working on that today. What I could say, except some development not related to that I updated app-scripts and reinstalled all my dependencies:

• Update package.json to "@ionic/app-scripts": "1.3.6"
• rm -r node_modules
• npm install

and I also updated cordova and both platform

• npm install cordova -g
• ionic platform rm ios
• ionic platform add [email protected]
• ionic platform rm android
• ionic platform add [email protected]

Hope you guys gonna be as lucky as I'm :)

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
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.2.1
Xcode version: Xcode 8.3 Build version 8E162

[GeeKanJi]

Thanks for sharing @peterpeterparker

Same thing here, the problem is solved with the update to Ionic.3.1.1

Ionic Info:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

[jgw96]

Hello all! Since this issue was fixed in ionic 3.1.1 I am going to close this issue for now. Thanks for using Ionic everyone and thanks for the patience on this issue.

[zds-d]

The problem does not seem to be resolved。
I'm using ionic -3.6.0。
I use “swipe” and “overflow:scroll” at the same time.
it Can not scroll。
“click” event can

[jcDu]

The same as @zds-jack .
It works before, but after I upgraded the ionic(or ionic-angular) version, it can't.

[marcorinck]

This bug is not fixed even in ionic 3.8.1. When you have elements which listen for tap events inside an ion-scroll element, scrolling is not working properly anymore. You can only scroll when you manage to start swiping on the scroll container itself. When the swipe gesture starts on an element which listens for tap, scrolling does not work.

Changing tap to click event immediately fixes the scrolling problem.

[rvaitkus23]

It's a real problem. Changed click events to tap and on android it does not allow to scroll on those items. Why in half a year nobody tried to fix this issue?

[pliashkou]

@jgw96 Still reproducible for me

[Antoine-BL]

For anyone still having these issues, I've found a workaround for (press) events. They're far from ideal, I'll admit it myself, but I think they could help in a pinch. As a forewarning, I only use the press event and so don't have a way to allow for short press events (like the ionic press event) and long press events to coexist on the same Component, though this code could easily be adapted to allow for it.

Code

in your component's controller:

@HostListener('touchstart', ['$event'])
  touchStart(event: TouchEvent){
    this.currentTouch = event;

    this.timeout = setTimeout(() => this.onPress(event), 1000);
  }

  onPress(event: TouchEvent){
    if (this.currentTouch != null) {
      let touch: Touch = this.currentTouch.touches[0];
      let thisElem: Element = this.elRef.nativeElement;
      let otherElem: Element = document.elementFromPoint(touch.clientX, touch.clientY);
      console.log('testing util');

      if (HTMLUtils.hasChild(thisElem, otherElem)) {
        console.log('Press');
        //Do things here
      }
    }
  }

  @HostListener('touchmove')
  onEnter = (event) => {
    this.currentTouch = event;
  }

  @HostListener('touchend')
  onLeave = (event) => {
    window.clearTimeout(this.timeout);
    this.currentTouch = null;
  }

And here's the HTMLUtils.hasChild() code:

public static hasChild(parent: Element, target: Element) {
        let children: HTMLCollection = parent.children;
        for (let i: number = 0; i < children.length; i++) {
            let item: Element = children.item(i);

            if (item == target) {
                return true
            } else {
                return this.hasChild(item, target);
            }
        }

        return false;
}

Again, this solution is pretty stopgap since you need to add private members (currentTouch and timeout) to the controller class and a whole bunch of code for not much, but it works well enough for me in the meantime.

[osterland]

sorry - but after nearly a year i have to ask this ...

is there still hope? i really need the customizable (tap) event instead of click's :/

[jaco-terbraak]

Confirmed using Ionic 3.19.1 and Cordova 8.0.0. Cannot scroll when using an ion-grid with interaction.

[cmer4]

this needs a fix;/ please re open the issue

[jaco-terbraak]

I fixed my issue.

For my particular situation the issue was that the ion-grid was populated using a *ngFor looping over te result of a function call. The consequence was that the ion-grid was constantly being refreshed, which continually interrupted scrolling.

I refactored the ion-grid to use a property rather than a function call, and now my ion-grid is scrolling fine.

[Abhishek-Kanitkar]

For those still looking to enable scrolling,

Please see this solution,

https://github.com/hammerjs/hammer.js/issues/1014#issuecomment-372513548

[GabrielGMartinsBr]

This has not been fixed, scrolling does not work when the touch start under elements with (press)

Edit
This solve for me:
[style.touch-action]="'pan-x'"

[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.