How to scroll without accidently clicking list items?

1

I have a list of “posts” the user can click on to view the comments within that post:

    <ion-list can-swipe="true" option-buttons="optionButtons">
      <ion-item ng-repeat="ticket in tickets" item="ticket" item-type="item-text-wrap" href="#/tab/inbox/ticket/{{ticket.id}}">
        <img src="{{ticket.gravatar}}" height="32" width="32">
        <h2>{{ticket.from}}</h2>
        <h3>{{ticket.default_subject}}</h3>
        <p>{{ticket.summary}}</p>
      </ion-item>
    </ion-list>

However, when trying to scroll, I often am taken into a ticket by accident. I can scroll a little bit, but seems to always eventually get caught being taken into a post I didn’t want to view. It’s like the click event is not smart enough to not fire when I am trying to scroll.

Is there any way to make this behave more intelligently and feel more “native”?

2

Registering clicks is a quite delicate piece of the framework that has its own platform specific quirks. Quite a lot of work has gone into this already but there are still adjustments being made nearly every release.

In order to debug this it’s important to know on which platform you’re experiencing this issue: desktop / iOS device / iOS simulator / Android (version)?

3

I have compiled the app and installed on both iOS 7.1 and Android 4.4 (Nexus 5). Both platforms have the same behavior of sometimes registering the clicks when trying to scroll.

Also, if an item in the list has action buttons that I can swipe to reveal, swiping to close them often also fires the click on the list item and takes me into another screen.

4

And which version of Ionic?

5

I am on Ionic 1.0 currently.

6

I’m having the same behavior with scroll and click events with my compiled android app with v1.0.0-beta.1-nightly-1491 running on Android 4.2.

7

This behavior also reported in Enters list items when try to scroll through list.
Maybe this topic is duplicated!

8

Yeah this is a challenging one, and it may be related to this recent change due to this issue: https://github.com/driftyco/ionic/issues/970

I’ll keep working on it, to be continued…

9

Are you on the nightly or just the release build?

10

Just the release build I believe. Upgraded sometime last week.

11

@adam The issue is with infinite scroll and the dom/bindings updating. I tested by loading 300 items at once and then scrolling. While the performance was poor, no clicks were improperly registered on scrolling. When you load 10 at a time though, sometimes the scroll “hangs up” and a click is registered. Obviously several ways you could approach this. One is you could prevent clicks until the scroll.infiniteScrollComplete is completed. However, that may cause other issues. Another and better way imo is that you could make sure while loading a new set that there is always a buffer of scroll space below the content before any data is even sent so there isn’t an issue with there being no travel at the bottom. Essentially a “bounce” space at the bottom.

Additionally, one of the big issues is that the longer the list the worse the performance because of ng-repeat and all the watches and bindings. Please take a look at this blog entry - http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/

You would obviously need a custom implementation of something similar.

12

An interesting library just released that gives some ideas in to how to load long lists without the lag is here - https://github.com/webux/ux-angularjs-datagrid

He gives a good example of a 50k list that scrolls very fast on mobile. One of the few times the two way bindings in Angular aren’t really your friend, let alone the DOM size.

13

you guys are already probably aware but you are better of loading a large ng-repeat list using the bindonce directive.

see https://github.com/Pasvaz/bindonce and also http://angular-tips.com/blog/2013/08/removing-the-unneeded-watches/

I know it is not the answer to the real problem but may assist a little

cheers

14

I noticed the same after upgrading to 1.0.0-beta.1!

15

bindonce doesn’t help. In my scenario I show a list of cards. Even with only a low number of items (~30) scrolling gets laggy. Actually the biggest performance hit is infinite-scrolling. Instead of stopping the scrolling and then loading the data, it seems to me as the scrolling continues while adding new items. If I scroll realy fast I trigger multiple infinite loads resulting in stutterig. I will investigate further what does happen and if there is a workaround.

16

Are you changing the distance of the scroll? I found changing it from the default of 1% caused it to fire twice or three times after scrolling for a bit. Performance was much better at 1%. Not a permanent fix but it will do for now.

17

Yes I know this issue has been fixed with recent commits to the nightly build but it appears tap events now take longer to fire in my test device - Android 4.1.2. Most times I get to tap like 2/3 times to enter/click through a list item but scrolling is smoother now and behaves as anyone would expect. Anybody else having this issue?

18

@tolu360 What build number are you seeing the slow clicks with (build number is in the last four digits in this line at the top of the js, like Ionic, v1.0.0-beta.1-nightly-1553)?

How large of a list do you have? Are you seeing the same issues if you have just 3 items? Reason I ask is just to figure out if its a list performance issue or a tap/click delay issue. Thanks

19

My most recent compiled version of the app runs on nightly 1520. This bit of a lag is not apparent on Android versions 4.2 and above but then I can’t even generalize because I only tested on just one 4.1.2 device.

My list is around 25 items right now. Haven’t tested on a real device with fewer list items though.

20

Just wanted to add that I tested on 3 devices with android version 4.2+ and didn’t notice any lag