Ionic-framework: while scrolling , other components like tabs unresponsive

[izee]

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

I'm submitting a ... (check one with "x")
[x ] bug report

Steps to reproduce:

1. drag the screen to make ion-content or ion-list to scroll
2. before scrolling ended, click on tab or header-button
3. in IOS, nothing happened, click event not triggered.
4. in Android, click only make scrolling to stop ,click event not triggered.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.7.0
Xcode version: Not installed

[astec]

Same issue with Segment in header toolbar - very annoying.

[jgw96]

Hello all, thanks for using Ionic! So the reason that scrolling is blocked by default is for performance. A click on a button or on a segment while there is scrolling going on will cause jank. Because of this we chose to block clicks during scrolling. Is that a good trade off in y'all's opinion?

[astec]

@jgw96 I believe it's a bad trade off - if you don't know the reason the app seems to behave unpredictably and almost randomly - you feel like you can't trust the app and the feeling is a bit frustrating.

I don't get it about jank - can the scroll be stopped on click and render at whatever position it is at the moment?

I agree that clicks can/should be blocked within the scrollable area to prevent accidental clicks but not outside of scrollable content area.

[izee]

I agree with @astec , block event only in scrolling content area.

[brandyscarney]

Here's what I found concerning this issue on RC4:

• on iOS I am able to switch tabs while the content is scrolling
• on Android it shows the ripple as if the tab will change but the content just stops scrolling

I believe this should behave the same as native (see the native Google+ app)

[hveluwenkamp]

I've also experienced that after clicking whilst scrolling, when the scrolling stops, clicks are no longer recognised in the list area. Other buttons, like in the header, still work.

If you are blocking clicks during scrolling, you may have a new bug where clicking is kept disabled.

[jgw96]

Hello all! So here is my findings on this issue so far. From my testing it seems this is standard behavior in Chrome on Android (which includes the webview). For example if you try https://www.amazon.com/ , https://react-hn.appspot.com/#/?_k=qxqym7, https://www.flipkart.com/ and specifically this page in the polymer shop demo https://shop.polymer-project.org/list/mens_outerwear in chrome on an android device you will notice that while you are scrolling you cannot click anything on the page, including the header on the shop site and flipkart, which matches the behavior this issue is talking about perfectly. So from brandys findings it does not seem to be our click blocking that is causing this behavior, as it works on iOS and as my testing shows it seems this is default behavior in chrome. So, the next step is figuring out what we can do about this.

[jgw96]

I can also confirm that i see the same behavior in Firefox for Android on the same sites, so it does not seem that this is chrome specific.

[astec]

@jgw96 For me this issue is noticeable on iOS Safari. It may be the case in other browsers as well but I'm testing primarily on iPhone in Safari.

[jgw96]

Thanks for the info, so it seems like this is pretty standard behavior across all browsers. If you try those sites i listed above do you see the same behavior? https://www.flipkart.com/ is a nice example, on the main page they have a sticky header

[jgw96]

@astec and @izee could you guys try the above sites i posted on your devices and see if you see the same behavior i described in my above comments ?

[jgw96]

So i can pretty much confirm that this is in fact something that is built into the browser. The next step here is to figure out a way around this. JS scrolling on all our platforms would probably work, but i dont think that is the best solution.

[izee]

I tried it with chrome in android, the behavior ( click in scrolling area ,no event trigger) looks like built in chrome, and ion-content scroll area is full-screen, so tabs and header affected.

[jgw96]

Hey @izee and @astec so ive made some progress on this issue. I have made a repo here https://github.com/jgw96/swipeBackTesting/tree/scrollTest that demonstrates an example where this bug is not happening. Would you guys mind cloning that repo (git clone https://github.com/jgw96/swipeBackTesting/tree/scrollTest.git), checking out the scrollTest branch (git checkout scrollTest) and then npm installing and trying that app on your device? On my devices i can switch tabs while scrolling and open the fab while scrolling. But, on my devices with our conference app example i cant switch tabs or open the fab while scrolling, so im trying to find the differences there.

[jgw96]

Hello all, thanks for using Ionic! Because this issue is not have a good repro at the moment I am going to close this issue for now.

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