Phonegap iOS scrolling singletap hadling issues #111
Comments
|
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 (415) 288-3697
|
|
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 (415) 288-3697
|
|
You are right, i just use one of iOS examples, and it is not a very good Radek 2014-12-02 19:51 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
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 (415) 288-3697
|
|
I’m also curious what you’re using with ChUI, whether it’s just jQuery or any other libraries. Robert Biggs (415) 288-3697
|
|
I am sending you video. Notice the wrong number of tapped item in detail The same situation on iPhone and iPad (both iOS8). The app is just the same source code as here (no another libraries): For faster debugging, i have used Phonegap serve function. (In the device 2014-12-02 20:09 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
Looking at your JavaScript code I found this piece: 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: 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 (415) 288-3697
|
|
Yes, you are right, that your way is better for binding event (this is just Radek 2014-12-02 20:41 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
I’ve put up your code with a slight refactor for conciseness here: http://vxjs.org/scrollExample http://vxjs.org/scrollExample 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: Then you could do something like: Robert Biggs (415) 288-3697
|
|
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 (415) 288-3697
|
|
I usually pass the id using the same way as you suppose, or using data- It seems it really could be some Phonegap issue. Tomorrow I will try to 2014-12-02 21:03 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
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 (415) 288-3697
|
|
Yes, this is really odd. I have to create a regular build for iOS using 2014-12-02 21:27 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
I have bad news... I took your code from http://vxjs.org/scrollExample and 2014-12-02 21:35 GMT+01:00 Radek Vala [email protected]:
Ing. Radek Vala |
|
For an example of scrolling lists that lead to details without your problem, visit: http://vxjs.org/wines |
|
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 I have intensivelly looked for some solution and i found this "hack" which Main problem is, when scrollable area is scrolling, we get bad id after It is not possible to do this in touchstart. So it should be changed the document.addEventListener('touchend', function (event) { }); Here you can find the code which reproduces the bug, but be aware - on iOS8 http://beent.je/ios-targetelement-bug.html Radek 2014-12-04 2:07 GMT+01:00 sourcebits-robertbiggs [email protected]:
Ing. Radek Vala |
|
Hello Robert, any new ideas with the iOS scrolling issue? I think, the best solution is to mimic iOS native scrolling - move to Particular solution is to use touchend eventListener and to get the parent $scroller[0].addEventListener('touchend',showId); var showId = function(ev){ Here I have the testing project - in console.log, you can see: If you test it in iOS device (Cordova App), you can see, that this values Link to the HTML&CSS&JS http://www-tvorba.com/chuiScroll/#/main Link to the whole iOS project for testing. RV 2014-12-04 15:48 GMT+01:00 Radek Vala [email protected]:
Ing. Radek Vala |
|
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. |
|
Thank you, I appreciate your efforts to help me. I have also used iScroll 2014-12-09 15:43 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
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. |
|
Good to hear this news. As for WKWebView - yes there is the major bug with 2014-12-09 16:22 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
|
Thanks, we'll take a look at what they've got. |
|
The plugin listed above is working for me very good on iOS. I hope it can 2014-12-02 21:27 GMT+01:00 sourcebits-robertbiggs [email protected]
Ing. Radek Vala |
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.
The text was updated successfully, but these errors were encountered: