Touch Events Area Too Small


#1

Thanks to @xAlien95, I have a sample of a SideMenu based Nav-Router app here : http://plnkr.co/edit/Y8PEss6T4btzUolbkxFh?p=preview

If you open this in Chrome, and click around, all will seem fine. For example, click on the “Invite” button on the home page. It will navigate to the Invites page (note : the title doesn’t update - something to fix). Then, you can click on the back button to go back to the home page.

Now, turn on ‘Emulate Touch Screen’. Now, go to the Invites page. Now try to click the back button. It’s very hard to do. You have to click in exactly the right spot. The touch area for the back button is simply too small. Sometimes, if you click in the same spot about 3 times, the click registers successfully.

When I build my app for iOS using Cordova, again I have the same problem. You have to stab around the button a few times to get it to work.

Anyone have a solution for this?


Back Button Fixed But Broken
#2

I am also having this problem. The back button and the menu (sidebar) take a few presses to get them to register.


#3

This could actually be not a touch area problem but a mutliple event firing problem (sometimes, touches can fire really quickly, or perhaps there is a bug in Ionic such that the tap “undos” itself).

There is an issue about this on github I believe. We will look into it!


#4

@max I believe that is the problem as well. See this video. I would have posted earlier but had to leave house.

Quick video showing issues with touch events on the back button.

Notice how the number of clicks that cause the back event is inconsistent? In some cases, 2 clicks triggers the back event. In others, 1 or 3 clicks triggers.

None of these issues exist unless touch events are used.


#5

I don’t think the problem is because of the size of the touch area per se although that would contribute to missing the button with your finger.

The real issue I believe is touch (or possibly click?) events firing on the back button. I am experiencing this exact same behaviour and I initially thought it was because my pages contain long lists (load/render time related problem) but no it is almost definitely something to do with touch events either not firing or firing too many times or overlapping with click events with a 300ms delay?? All pure guess work!

EDIT: This might be contributing to the problem? $element.bind('click' Slow?


#6

It’s probably related to both ng-click and then our “fastclick” implementation sending a tap event. ng-click will be fast with the ngTouch module we require, but sometimes our fastclick stuff gets in the way. There are open issues on github for this and I’ll mark them as high priority.

Thanks for all the info, it really helps!


#7

This is happening to me also. Im testing the side bar menu and lot of times the tap (click) fail on my device (samsung s3).