Phonegap iOS scrolling singletap hadling issues

[RadekVala]

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap - also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

[sourcebits-robertbiggs]

Hi Radekvala,

The native browser on Android, even in the latest versions, is notoriously buggy, especially with event handling. There’s a long list of event bugs, events firing multiple times or not firing at all, etc. Unfortunately the engineers at Google have never felt the need to address any of these bugs, so the native browser has remained extremely buggy to this day.

Give me a little bit of time today to look at the issue on my 4.1.2 device and see if I can find replicate the issue and come up with a workaround for you.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap - also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

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

[sourcebits-robertbiggs]

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap - also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

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

[RadekVala]

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

Could your elaborate what issues you’re having with iOS?

I’m having a feeling that something in Phonegap might be introducing bugs since I have made so many scrollable navigation lists for iOS since version 5 and have never had any serious issues.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965.

[sourcebits-robertbiggs]

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965.

[RadekVala]

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

Looking at your JavaScript code I found this piece:

    $('ul.list li').on('singletap', function(){
        var index = $(this).index();
        $('p.clickedId').html(index);
    });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

    $('ul.list').on('singletap', ‘li’, function(){
        var index = $(this).index();
        $('p.clickedId').html(index);
    });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala notifications@github.com wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110.

[RadekVala]

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala notifications@github.com wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

I’ve put up your code with a slight refactor for conciseness here: http://vxjs.org/scrollExample http://vxjs.org/scrollExample It seems to be perform as expected for me in Safari, in the simulator running iOS 8 and on the iPhone 6 Plus running iOS 8. However, I did notice some unexpected results when running on an iPhone 5S with iOS 7. I was not getting the index value I was expecting. This means that jQuery’s index method is not working as expected on iOS 7 mobile Safari. This is not something I have control over.

I’m curious what you are actually trying to accomplish with this test. First of all, using jQuery’s index() method is not a very efficient way to deal with user interaction of lists. It would be better to sign a data value to each list item and retrieve that with the user taps. That’s how I always deal with interactive lists. Or even just create an id whose value increases with each list item:

<li class="nav" data-goto=“detail” id=“ID’ + value + ‘">'+value+'

Then you could do something like:

    $('ul.list').on('singletap', 'li', function(){
      var index = parseInt(this.id, 10);
      $('#selectedIndex').html(index);
    });

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala notifications@github.com wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll. Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110.

[sourcebits-robertbiggs]

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala notifications@github.com wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala notifications@github.com wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala notifications@github.com

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451.

[RadekVala]

I usually pass the id using the same way as you suppose, or using data- attribute. But in this case I was testing all of ways i know to obtain the proper id of taped list item and I ended up the testing with the index() method.

It seems it really could be some Phonegap issue. Tomorrow I will try to build this example using Apache Cordova, because with Phonegap serve, your code still has the same issue.

2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala notifications@github.com wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala notifications@github.com wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala notifications@github.com

wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala < notifications@github.com>

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll>.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451>.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

That strikes me as really odd. I have so many user successfully build Phonegap apps with ChocolateChip-UI and have never run into this issue before. But then, that the fun part about bugs, you never know when one will bite. :-(

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 12:23 PM, RadekVala notifications@github.com wrote:

I usually pass the id using the same way as you suppose, or using data- attribute. But in this case I was testing all of ways i know to obtain the proper id of taped list item and I ended up the testing with the index() method.

It seems it really could be some Phonegap issue. Tomorrow I will try to build this example using Apache Cordova, because with Phonegap serve, your code still has the same issue.

2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs <notifications@github.com mailto:notifications@github.com> :

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ http://chocolatechip-ui.com/> www.sourcebits.com http://www.sourcebits.com/ <http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ http://chocolatechip-ui.com/> www.sourcebits.com http://www.sourcebits.com/ <http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/ http://app.phonegap.com/. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ http://chocolatechip-ui.com/> www.sourcebits.com http://www.sourcebits.com/ <http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala <notifications@github.com mailto:notifications@github.com>

wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ http://chocolatechip-ui.com/> www.sourcebits.com http://www.sourcebits.com/ <http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll>.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451 https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451>.

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

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65297867.

[RadekVala]

Yes, this is really odd. I have to create a regular build for iOS using Apache Cordova (Phonegap build is an application with all Phonegap plugin loaded and all HTML/JS/CSS is sent to this app using wifi - you never know, what can it cause). I dont have my mac here now, so I will inform you tomorrow.

2014-12-02 21:27 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

That strikes me as really odd. I have so many user successfully build Phonegap apps with ChocolateChip-UI and have never run into this issue before. But then, that the fun part about bugs, you never know when one will bite. :-(

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 12:23 PM, RadekVala notifications@github.com wrote:

I usually pass the id using the same way as you suppose, or using data- attribute. But in this case I was testing all of ways i know to obtain the proper id of taped list item and I ended up the testing with the index() method.

It seems it really could be some Phonegap issue. Tomorrow I will try to build this example using Apache Cordova, because with Phonegap serve, your code still has the same issue.

2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll>

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/ < http://app.phonegap.com/>. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll> < http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll>.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container)

Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container)

If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451>>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65297867>.

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

---

Ing. Radek Vala 731 123 409

[RadekVala]

I have bad news... I took your code from http://vxjs.org/scrollExample and wrap it into Apache Cordova Application (without any special plugins). The result is the same as shown in the video, i have sent you. If list is scrolling - moving and you tap item eg. 23, you get id eg. 6. You get the proper ID only in case, that the list is not scrolling.

2014-12-02 21:35 GMT+01:00 Radek Vala radek.www@gmail.com:

Yes, this is really odd. I have to create a regular build for iOS using Apache Cordova (Phonegap build is an application with all Phonegap plugin loaded and all HTML/JS/CSS is sent to this app using wifi - you never know, what can it cause). I dont have my mac here now, so I will inform you tomorrow.

2014-12-02 21:27 GMT+01:00 sourcebits-robertbiggs < notifications@github.com>:

That strikes me as really odd. I have so many user successfully build Phonegap apps with ChocolateChip-UI and have never run into this issue before. But then, that the fun part about bugs, you never know when one will bite. :-(

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 12:23 PM, RadekVala notifications@github.com wrote:

I usually pass the id using the same way as you suppose, or using data- attribute. But in this case I was testing all of ways i know to obtain the proper id of taped list item and I ended up the testing with the index() method.

It seems it really could be some Phonegap issue. Tomorrow I will try to build this example using Apache Cordova, because with Phonegap serve, your code still has the same issue.

2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala < notifications@github.com mailto:notifications@github.com> wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll>

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/ < http://app.phonegap.com/>. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll> < http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll>.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451>>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65297867>.

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

---

Ing. Radek Vala 731 123 409

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

For an example of scrolling lists that lead to details without your problem, visit: http://vxjs.org/wines This is a reference app we put together for iPhone 5, 5S, 6, 6 Plus, iPad and desktop Safari. You can access the source code on github: https://github.com/sourcebits-robertbiggs/CaliforniaWines

[RadekVala]

I am afraid that provided example will also suffer on the same issue.

I have done little investigation in this area and found some key information. The issue which i have described is documented on the internet (Eg. fastclick github issue: https://github.com/ftlabs/fastclick/pull/122). If I understand it correctly it is affecting all apps which are running in UIWebView (Cordova, Phonegap apps) and it does not matter on iOS version. In Safari on iOS8, the issue is not occuring, an I mean, it is connected with scroll event handler implementation on iOS < 7 and UIWebView. More info here: http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/.

I have intensivelly looked for some solution and i found this "hack" which is possible to use in case of UIWebView apps, or apps running iOS < 8 Safari browser:

Main problem is, when scrollable area is scrolling, we get bad id after selecting one. It is possible to solve this in touchend event, where you are able to obtain really touched element using dcument.elementFromPoint method.

It is not possible to do this in touchstart. So it should be changed the code probably in scroll.js and the scrollable area should be somehow detected, and if it is scrollable area, the parent should be evaluated using the code bellow. I really do not know event handling proccess in CHUI FW, you could know better, how it integrate.

document.addEventListener('touchend', function (event) { var touch = event.changedTouches[0]; var parent = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset); console.log(parent.id);

});

Here you can find the code which reproduces the bug, but be aware - on iOS8 in Safari, it will work well. But the issue appear, if the code is wrapped into phonegap/cordova.

http://beent.je/ios-targetelement-bug.html

Radek

2014-12-04 2:07 GMT+01:00 sourcebits-robertbiggs notifications@github.com:

For an example of scrolling lists that lead to details without your problem, visit: http://vxjs.org/wines

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

---

Ing. Radek Vala 731 123 409

[RadekVala]

Hello Robert,

any new ideas with the iOS scrolling issue?

I think, the best solution is to mimic iOS native scrolling - move to scroll and first tap to stop scrolling momentum. If the second tap will trigger the action, there will be no problem with bad parents (identifiers). But I do not know, if it is possible to stop scrolling when scroll event is not triggered on iOS<8 and UIWebView.

Particular solution is to use touchend eventListener and to get the parent using this code:

$scroller[0].addEventListener('touchend',showId);

var showId = function(ev){ var touch = ev.changedTouches[0]; var parent = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset); };

Here I have the testing project - in console.log, you can see: Element Id using singletap on li: Item 7 Element ID - using touchend & elementFromPoint: Item 5

If you test it in iOS device (Cordova App), you can see, that this values are different and only the elementFromPoint method return the right parent, if user taps scrolling list. The detail page is not implemented, the parents are shown only in console.

Link to the HTML&CSS&JS http://www-tvorba.com/chuiScroll/#/main

Link to the whole iOS project for testing. https://www.dropbox.com/s/0ncu7zh2nn94dbr/scrolltest.zip?dl=0

RV

2014-12-04 15:48 GMT+01:00 Radek Vala radek.www@gmail.com:

I am afraid that provided example will also suffer on the same issue.

I have done little investigation in this area and found some key information. The issue which i have described is documented on the internet (Eg. fastclick github issue: https://github.com/ftlabs/fastclick/pull/122). If I understand it correctly it is affecting all apps which are running in UIWebView (Cordova, Phonegap apps) and it does not matter on iOS version. In Safari on iOS8, the issue is not occuring, an I mean, it is connected with scroll event handler implementation on iOS < 7 and UIWebView. More info here: http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/.

I have intensivelly looked for some solution and i found this "hack" which is possible to use in case of UIWebView apps, or apps running iOS < 8 Safari browser:

Main problem is, when scrollable area is scrolling, we get bad id after selecting one. It is possible to solve this in touchend event, where you are able to obtain really touched element using dcument.elementFromPoint method.

It is not possible to do this in touchstart. So it should be changed the code probably in scroll.js and the scrollable area should be somehow detected, and if it is scrollable area, the parent should be evaluated using the code bellow. I really do not know event handling proccess in CHUI FW, you could know better, how it integrate.

document.addEventListener('touchend', function (event) { var touch = event.changedTouches[0]; var parent = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset); console.log(parent.id);

});

Here you can find the code which reproduces the bug, but be aware - on iOS8 in Safari, it will work well. But the issue appear, if the code is wrapped into phonegap/cordova.

http://beent.je/ios-targetelement-bug.html

Radek

2014-12-04 2:07 GMT+01:00 sourcebits-robertbiggs <notifications@github.com

:

For an example of scrolling lists that lead to details without your problem, visit: http://vxjs.org/wines

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

---

Ing. Radek Vala 731 123 409

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

Actually, the issue is not something that we can completely solve due to the way native scrolling works in a mobile browser. There's two things at play, one of which we have no control over. In native apps, when you scroll, the scroll event is exposed, and when you tap to stop the scrolling, the system can see that you've tapped something scrolling and will assume you meant to stop that. Even if it was on a navigable item, no navigation event will fire because the system stop the navigation event from propagating.

In our case, we are on a Web page that uses JavaScript for events. All the calculations are based off on an initial touchstart event.This means that if you scroll a navigable page and then stop it with a strong tap, a touch start will be registered on anything under that tap. Hence the various issues with scrolling navigation lists. Unless the mobile OS venders change the current behavior of their mobile browsers to stop the propagation of JavaScript events when the user taps to stop a scrolling element, there is no way to get around this problem.

However, if this really bugs you so much, you might try another solution. It's one we used for ChocolateChip-UI several years ago. You can use a JavaScript library that does the scrolling for you on the list. I've used iScroll in the past. Because this library mimics scrolling through animation, it is able to stop propagation of events when you tap a scrolling list. However, it is not without it's own issues. First of all is the size. Back when we used it for scrolling in ChocolateChip-UI it accounted for 1/3 of the size of the whole framework. It sometimes has its own bugs which can be hard to troubleshoot. It doesn't work well on very long lists. And it can cause a log of slow down if you use it on many elements.

Because of these issues in the end we abandoned it in favor of our current approach. Feel free to look at iScroll, experiment with it. I can't really help you out with any integration problems since it's been several years since I've used it. Basically you run a constructor function on a parent, such as the article's section tag, which makes all the contents scrollable. Good luck.

[RadekVala]

Thank you, I appreciate your efforts to help me. I have also used iScroll in past. But the reason why I used ChocolateChip-UI as a front-end dev framework is the lightweight and simple code. I have also worked with jQuery Mobile and Cordova/Phonegap and I have realized that lot of bugs came from the robust and complicated code and event handling in JQM. That's why a ended up with CHUI. But now I see, that it is not applicable in production environment, at least wrapped in Cordova/Phonegap for all iOS users (until there is UIWebView inside the app). It is really serious bug, if the user is not able to get the proper detail information within longer scrollable list. I hoped, that there can be some general solution for this (or some fix for UIWebView) as a part of CHUI event handling. If it is not possible, I probably try to find some fix or small library for scrollable areas.

2014-12-09 15:43 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Actually, the issue is not something that we can completely solve due to the way native scrolling works in a mobile browser. There's two things at play, one of which we have no control over. In native apps, when you scroll, the scroll event is exposed, and when you tap to stop the scrolling, the system can see that you've tapped something scrolling and will assume you meant to stop that. Even if it was on a navigable item, no navigation event will fire because the system stop the navigation event from propagating.

In our case, we are on a Web page that uses JavaScript for events. All the calculations are based off on an initial touchstart event.This means that if you scroll a navigable page and then stop it with a strong tap, a touch start will be registered on anything under that tap. Hence the various issues with scrolling navigation lists. Unless the mobile OS venders change the current behavior of their mobile browsers to stop the propagation of JavaScript events when the user taps to stop a scrolling element, there is no way to get around this problem.

However, if this really bugs you so much, you might try another solution. It's one we used for ChocolateChip-UI several years ago. You can use a JavaScript library that does the scrolling for you on the list. I've used iScroll http://iscrolljs.com in the past. Because this library mimics scrolling through animation, it is able to stop propagation of events when you tap a scrolling list. However, it is not without it's own issues. First of all is the size. Back when we used it for scrolling in ChocolateChip-UI it accounted for 1/3 of the size of the whole framework. It sometimes has its own bugs which can be hard to troubleshoot. It doesn't work well on very long lists. And it can cause a log of slow down if you use it on many elements.

Because of these issues in the end we abandoned it in favor of our current approach. Feel free to look at iScroll, experiment with it. I can't really help you out with any integration problems since it's been several years since I've used it. Basically you run a constructor function on a parent, such as the article's section tag, which makes all the contents scrollable. Good luck.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

Scrolling issues seem to be the achiles heel of hybrid apps. I'm always coming back to scrolling and look for ways to improve the situation. That said, it seems that Phonegap/Cordova introduces a whole other set of issues into the mix. Last week I was trying to come up with a WKWebView wrapper to use with ChUI so I could take advantage of all the power that it offers. Unfortunately I ran into some serious bugs affecting the loading of local files once the app is loaded onto a phone. In the end I abandoned it and in 10 minutes had a simple UIWebView wrapper working. I'm going to push this to Github in a couple of days, I'm just working on an Android wrapper version. The UIWebView version is working fine on iOS 7 and 8 with iPhone 5-5S and 6 - 6 Plus. Taps on scrolling lists are displaying the expected items. Of course, if you tap hard to stop a scrolling list, it will trigger a navigation event. However, if you tap slightly, and maybe just a slight movement, then the scrolling is stop and no navigation occurs either. Best we can do with the current state of affairs. I'll update you when we check this in.

[RadekVala]

Good to hear this news. As for WKWebView - yes there is the major bug with sandboxed files loading. But maybe you can check out this plugin: https://github.com/Telerik-Verified-Plugins/WKWebView. I will try it, maybe CHUI scroll list will work fine inside new WKWebView and this plugin will not produce more other bugs.

2014-12-09 16:22 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

Scrolling issues seem to be the achiles heel of hybrid apps. I'm always coming back to scrolling and look for ways to improve the situation. That said, it seems that Phonegap/Cordova introduces a whole other set of issues into the mix. Last week I was trying to come up with a WKWebView wrapper to use with ChUI so I could take advantage of all the power that it offers. Unfortunately I ran into some serious bugs affecting the loading of local files once the app is loaded onto a phone. In the end I abandoned it and in 10 minutes had a simple UIWebView wrapper working. I'm going to push this to Github in a couple of days, I'm just working on an Android wrapper version. The UIWebView version is working fine on iOS 7 and 8 with iPhone 5-5S and 6 - 6 Plus. Taps on scrolling lists are displaying the expected items. Of course, if you tap hard to stop a scrolling list, it will trigger a navigation event. However, if you tap slightly, and maybe just a slight movement, then the scrolling is stop and no navigation occurs either. Best we can do with the current state of affairs. I'll update you when we check this in.

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

---

Ing. Radek Vala 731 123 409

[sourcebits-robertbiggs]

Thanks, we'll take a look at what they've got.

[RadekVala]

The plugin listed above is working for me very good on iOS. I hope it can be the solution for production, until WKWebView will be integral part of Cordova app. RV

2014-12-02 21:27 GMT+01:00 sourcebits-robertbiggs notifications@github.com :

That strikes me as really odd. I have so many user successfully build Phonegap apps with ChocolateChip-UI and have never run into this issue before. But then, that the fun part about bugs, you never know when one will bite. :-(

Robert Biggs Product Director ChocolateChip-UI http://chocolatechip-ui.com/ www.sourcebits.com http://www.sourcebits.com/

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 12:23 PM, RadekVala notifications@github.com wrote:

I usually pass the id using the same way as you suppose, or using data- attribute. But in this case I was testing all of ways i know to obtain the proper id of taped list item and I ended up the testing with the index() method.

It seems it really could be some Phonegap issue. Tomorrow I will try to build this example using Apache Cordova, because with Phonegap serve, your code still has the same issue.

2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

This sounds more like issues with PhoneGap, which uses their own implementation of WebViews for Android and iOS. If I were you, I’d try reproducing this using Adobe’s Cordova and see if the issues persist.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:55 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

Yes, you are right, that your way is better for binding event (this is just quick and dirty demo to repro the issue). Right now I have changed the event binding using your way, but the result is the same. Unfortunately, it does not solve the problem. Interesting is, that on Android I can not reproduce this issue.

Radek

2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your JavaScript code I found this piece:

$('ul.list li').on('singletap', function(){ var index = $(this).index(); $('p.clickedId').html(index); });

That’s a lot of events being attached to every single list item. The more of them you have, the slower you app will become. For lists where you want to interact with list items, it’s always best to use delegated events:

$('ul.list').on('singletap', ‘li’, function(){ var index = $(this).index(); $('p.clickedId').html(index); });

This will only register the event on the list itself and listen for taps on the list item, which will return ‘this’ as the correct value of the tap list item. So everything should work the same.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:23 AM, RadekVala <notifications@github.com mailto:notifications@github.com> wrote:

I am sending you video. Notice the wrong number of tapped item in detail view (when list is scrolling).

The same situation on iPhone and iPad (both iOS8).

The app is just the same source code as here (no another libraries): http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll>

For faster debugging, i have used Phonegap serve function. (In the device is Phonegap app downloaded and the source code is consuming using wifi directly from my laptop) - http://app.phonegap.com/ < http://app.phonegap.com/>. I belive, this is not causing the problem.

2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 11:04 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

You are right, i just use one of iOS examples, and it is not a very good idea to run it on android. Generally, the little issues on Android are not so crucial for me. But the behavior on iOS (when the code is wrapped using Phonegap) is really buggy. Your content is natively scrolling down and you are not able to get the tapped element (and it is necessary in situations, you need to get some id of data to display). When the list is moving, you get some of list elements from the top of the list.

Radek

2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs < notifications@github.com mailto:notifications@github.com> :

Looking at your chuScroll example, it looks like you’re using the iOS version for Android. Please be aware that this theme was not created to work on Android but on iOS, where it has been thoroughly tested. As such you may run into rendering issues and even some functionality bugs since ChUI.js will be expecting the Android theme and instead having to deal with the iOS theme.

I just did some extensive testing of your example on the native Android browser running on version 4.2.2. I currently don’t have a 4.1.x device. What I’m seeing is some intermittent issues with the scroll menu. Just so you know what’s involved here, scrolling in ChUI is not through JavaScript. We are using the native implementation of scrolling provided by each mobile platform. When I scroll and then tap, if the tap is little for very quick, no tap registers and requires a second tap to fire a navigation event. If I scroll and then tap firmly on a navigation link, then navigation occurs as expected.

This means that what you’re experience is the native browser’s poor implementation of events. What some people try to do to remedy this flakiness of the events is to use the ontouchstart event. This does work quite well on the native browser for immediately firing a navigation event, but introduces another bug: the user will be unable to scroll the list because as soon as he or she touches a navigable list item to scroll, the navigation event fires. Fortunately the mobile Chrome browser does not have anywhere near as many JavaScript bugs as the native browser.

This is a problem that has long plagued developers trying to implement hybrid apps on Android, and unfortunately Google has not been inclined to address this.

I will spend some more time today to see if I can find an optimal timing restraint that might work just in your case. If I can come up with something that doesn’t introduce other bugs, I’ll send you a patch that you can use in your app.

Robert Biggs Product Director ChocolateChip-UI <http://chocolatechip-ui.com/ < http://chocolatechip-ui.com/>> www.sourcebits.com http://www.sourcebits.com/ < http://www.sourcebits.com/ http://www.sourcebits.com/>

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Dec 2, 2014, at 9:36 AM, RadekVala < notifications@github.com mailto:notifications@github.com>

wrote:

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll < http://www-tvorba.com/chuiScroll> < http://www-tvorba.com/chuiScroll http://www-tvorba.com/chuiScroll>.

Scenario: List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap

• also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container)

Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container)

If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65282793>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65284965>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65285680>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65288110>>.

— Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65291109>>

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub <

https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451 < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65293451>>.

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

.

---

Ing. Radek Vala 731 123 409 — Reply to this email directly or view it on GitHub < https://github.com/sourcebitsllc/chocolatechip-ui/issues/111#issuecomment-65297867>.

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

---

Ing. Radek Vala 731 123 409