[SOLVED]Clicking on list (card) element after scrolling- sometimes wrong item (Samsung S7)


#1

Hello together,
I have a strange issue on multiple devices but not in the webview.

When I scroll through my item list, which is build with cards on it, sometimes the link leads me to the wrong subpage. Which is kind of strange because sometimes everything is right.

Here is a code example, that you can see how I build the list and the card element, the … are just placeholders. :
`

`

Before I used separate divs for list and card, but changed it. It makes no different for the error. I start using cards in combination with the list-elements for better styling with scss. Not sure if it is a bad or a good way,

Thank you in advance for any help on this

William


#2

Hello again,
meanwhile I tested some stuff and just for a better overview I will give you a small overview for my results. The problem is still here, but I am running out of ideas now how to fix this issue:

  • Native Scrolling: Tested with overflow-scroll=true, error is still here
  • ScrollToTopButton: I am using a scroll to Top button like here (klick) and it is using the on-scroll directive by ionic. Deactivate it, same issue
  • Link h2 element and img: I am using the html a-container around an image and an h2-element. Test it only with img, but same error
  • StateParams: I am using the StateParams to give an ID to my controller for the next view. This IDs are always right, when there is a wrong item selected, he gives the ID of the wrong item. So the stateParams should not be the problem.
  • ScrollPosition: I was thinking that I have a problem with the Scroll-Position on the device, so I made a console.log for the scroll-Pos with the ionic scrollDelegate - everything is fine, he give me the right scrollposition back.
  • only Cards: Instead of using ionic cards in combination with ionic list I just use cards,… still not working.

So yeah, here we are again. ^^ Unfortunately I still have no solution for it, and also I have nor more ideas where the problem could come from. Does anybody has another idea? I know this is a really strange issue.

Thank you in advance


#3

Hi there William, I noticed you have the same issue as us. What helped in our case was applying virtual scrolling. But the ionic refresh and ionic infinite scroll stopped working with this implementation. So that’s why we believe something is wrong with the implementation of Ionic and not necessarily with our code.

Hope this helps you, and if you have another use case, it will. Where the infinite scroll + refreshing is not a requirement (or business gives you the time/budget to build it yourself), I would suggest implementing virtual scroll.
We have decided to wait for a next beta and hopefully the ionic team will pick this up.

Good luck! And let me know how it worked out.


#4

Thanks for your reply, I still use Ionic 1 so I cannot use the virtual-scroll. But it is also good to know that I am not alone with the issue.
I also have the feeling it is only when I use the app really quick, and it just happen sometimes, not all the time.

If I will get any new info I will post it here.


#5

Ok, I’m sorry for the misunderstanding here. Our app is created with ionic 2 beta 11. So not sure if it is the same problem we have! Good luck with it anyways.


#6

@sallawcos: No problem, maybe the problem is still connected to each other

Just some update by myself, I tried the following, still no solution:

  • clean up the template and just use some basic code with regular ionic css Styling --> Error is still there
  • ng-click vs. ui-sref: Added an ng-click to the div and give as parameter the $index from the ng-repeat. Also gave the ui-sref the index. Both has the same in the new state. The wrong one.

So it really looks like it is an bug, because the view cannot loaded fast enough. To get a better performance I also used the limitTo for ng-repeat, but still the same issue.

So yeah,… looks like I am running out of ideas how to fix this. :weary:


#7

@William_Wallace What ‘kinda’ (still not good enough) solved it for us was removing a tag. Somehow this is handled in another way. So maybe, if I remeber well you could, use ui-sref on a div. Try to change the a-tag to:

`

`

Our team suspects that it has to do with how they handle the click event of an a-tag


#8

Thank you, but it is still the same here. Maybe I will try to use the collection-repeat instead of ng-repeat.

Edit: I will not test with collection-repeat. With the use of that, I got more problems with the ui-sref. Welcome to the vicious circle.

Edit1: I tested it also with native-scrolling. error is still here.

Edit2: Sorry for the many edits, but I have a new idea or I forgot to mention something.

In the view where the error appears is the following logic:

  1. Start --> Http get from server with limit 10
  2. ScrollDown until Infinite Scroll comes up --> Http Get from server with limit 10 and an offset of 10, the new elements got pushed into the scope-Array.

That is just a small thing, and it is also strange that this would bring up the error. But maybe ionic is not build for handle pushed scope-variables or something. You know what I mean? On other Controller in the app I dont have these problems, and they dont handle it with push or something.


#9

OK, meanwhile I have tested the app much more and now the error only occurs on the Samsung Galaxy S7. The used Android Version there is 6.0.1.

I have no idea, but maybe that smartphones is not the best for ionic. I had an other strange bug before with Andoid Fullscreen and the Hardware-Back-Button.

Anybody else has problems with the S7? Or maybe exactly my problem here with the ion-list?


#10

Ok, I found a solution on this.

It looks like the “native scrolling” is not working really well on an Samsung Galaxy S7. As I disabled it, I did not see the error again.

Just add this code to my AppCtrl:

if (ionic.Platform.device().model == 'SM-G930F'){ $ionicConfigProvider.scrolling.jsScrolling(true); }

Maybe that would be helpful for others. Thanks


#11

Hi William
This is not connected with Galaxy 7 only. I have exactly the same issue on iPhone5c, iphone6 and iphone6s.