search

sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
617 stars 88 forks source link

Tabbar on Android - with scrolled content double click needed #86

Closed RadekVala closed 10 years ago

RadekVala commented 10 years ago

I am using 4 tabs in my app. If there is some longer list in the content and you scroll down, than double-click is needed for switching the tab. It happens only on Android (I have 4.1.2). By the first tap on the tab, it is highlighted and second tap triggers the transition. Is there any solution for this situation?

sourcebits-robertbiggs commented 10 years ago

I'm assuming you're talking about the native browser on Android. It does have a number of weird bugs affecting JavaScript events not executing as expected. Are you saying that when the list is very long, it takes two tabs to trigger a tab switch?

RadekVala commented 10 years ago

Yes, it happens in native browser on Android, in chrome it is OK (only desktop). The content could be short, but if it is scrolled under the tab bar, first tap only highlights the tab and the second triggers normal action - transition to another page.

It is like the content under the tab bar, changes the way of tap event handling.

EDIT: The behavior is buggy in native browser but also in Chrome for Android (v 36.0.1985.135). I guess the problem should appear also in Android 4.4, but have not tested.

2014-09-03 22:31 GMT+02:00 sourcebits-robertbiggs notifications@github.com :

I'm assuming you're talking about the native browser on Android. It does have a number of weird bugs affecting JavaScript events not executing as expected. Are you saying that when the list is very long, it takes two tabs to trigger a tab switch?

— Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/86#issuecomment-54361037 .

Ing. Radek Vala 731 123 409

sourcebits-robertbiggs commented 10 years ago

Yes. I can confirm this behavior. It appears that after scrolling, the browser is getting confused about where the focus is and not firing the initial tap. I'll need to spend some time troubleshooting. A workaround for a quick fix in your case might be to switch out the singletap for a $.eventStart in the tab bar code. Let me experiment and I'll get back with you with a workaround.

sourcebits-robertbiggs commented 10 years ago

So, I think I've resolved this issue. Please take a look at the latest checkin and let me know. I had added a chunk of code to implement swipe gestures on Android since Google had requisitioned them for browser history navigation. That code, which had a very short gesture detection, was causing the tap after a scroll from not being detected.

RadekVala commented 10 years ago

I can confirm, that the issue is resolved. Thank you, nice work.

As for the user experience, there is still little issue, when you scroll the long list. The list is scrolling and you tap the Tabbar, sometimes, it also only highlights the tab withnout transition. The tap only stops scrolling of the list, highlights the Tabbar with gray color and nothing else happen. But this is not the crucial problem and happens only when long list is scrolling at the moment.

sourcebits-robertbiggs commented 10 years ago

Well, that is an Android specific issue which has nothing to do with gestures. Google controls how interactions happen when something is scrolling. I'm sure if you interrupt the scroll, everything works fine. For several years now I have been dealing with a large number of Android browser event bugs. And this is the best I've been able to accomplish. Fortunately, Windows Phone 8 and iOS browsers have consistent event systems. Google doesn't seem to care much about their Android browser, instead giving all their attention to native app development.

RadekVala commented 10 years ago

I agree, this is the downside of hybrid MA in Android world. However,Tabbar component is now OK, and if the scrolling is interrupted, everything works fine.

2014-09-09 16:18 GMT+02:00 sourcebits-robertbiggs notifications@github.com :

Well, that is an Android specific issue which has nothing to do with gestures. Google controls how interactions happen when something is scrolling. I'm sure if you interrupt the scroll, everything works fine. For several years now I have been dealing with a large number of Android browser event bugs. And this is the best I've been able to accomplish. Fortunately, Windows Phone 8 and iOS browsers have consistent event systems. Google doesn't seem to care much about their Android browser, instead giving all their attention to native app development.

— Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/86#issuecomment-54975507 .

Ing. Radek Vala 731 123 409

sourcebits-robertbiggs commented 10 years ago

Actually, that only resolves the issue for mobile Chrome. The native browser is still bonked. But I have an idea. I'm thinking I'll put a test for Android and change the tab bar button events to touchStart instead of singletap. Since tab bars on android are at the top, that shouldn't affect scrolling. Using touchStart on anything that can scroll means the touchStart fires before you can scroll, doh! I'll let you know how this goes. If it resolves it, I'll push it.

sourcebits-robertbiggs commented 10 years ago

OK, that worked! I've pushed it, so check the latest. Tab bar buttons in native browser now using touchStart events and working as expected.

RadekVala commented 10 years ago

Nicely done!

I am testing in a Phonegap App on Android 4.1.2 - it means in native browser. The behavior before this fix was satisfactory, but with the scrolling list issue. After this fix, I can confirm that it works like a charm!

sourcebits-robertbiggs commented 10 years ago

Yeah, I'm happy how this turned out. I've been bugged by this bug for some time. I really appreciate your help in eliminating it. Thanks a bunch.