Inertial scrolling within Phonegap android app (all phones)

Question

My problem is described in the following.

I recently developed a Phonegap app (Android and Ios are the target platforms) and deployed it on the markets. My app mainly consists in an event list.

The list is obviously scrollable. The purpose is to give a native feeling experience to the users or at least something close to it. Actually, I would like to enable inertia for most users (everyone would be awesome!).

The app can’t be downloaded by android < 3.0 phones, so it doesn’t matter if the solution excludes android 2.X users. In addition, for the moment the app is not design for tablets so I don’t mind if the solution doesn’t works with android < 4.0.

I use the following CSS property on the scrollable div:

overflow: scroll;
-webkit-overflow-scrolling: touch;

On Ios, there is absolutely no problem. It is fast and inertial scrolling is enabled.

With Android, I'm still having problems with some phones. Here are my tests:

• Nexus 5 (Android 4.4) : inertia Ok
• Sony Ericsson (Android 4.0.4) : inertia Ok
• Samsung galaxy Trend (android 4.0.4) : inertia Ok
• Samsung Galaxy Note 3 - SM-N9005 (Android 4.3): No inertia
• Samsung Galaxy S4 (Android 4.3): No inertia

I don’t’ use any JavaScript library for scrolling (for example Iscroll ect…) and I don't want to do so except if it is a really lightweight librairy. In fact, I have tried Iscroll and the result is unusable because it is too slow and jerky. By the way, the event list contains gradient, images, text, shadow ect…

I have done a lot of research on the internet. And now, I feel lost! I even don’t know if the problem is related to:

1. The manufacturer layer
2. The Android version
3. The default browser on the phone (I think not because it appears that Phonegap doesn’t use it)
4. The embedded PhoneGap webKit rendering engine
5. Deprecated CSS properties : see this article
6. Something else?

It is a bit weird because it works on 4.0.4 and 4.4 but not on 4.3… I start to think this is related to manufacturer…

Any help, solution or information about the above would be really appreciated.

Answer 1

Not sure if you have solved your problem yet, but I just came across this issue.

I was using Hammer.js to detect drags for the sidebar, within doing so, I called preventDefault() which affected scrolling inertia in the android default browser, but not chrome. Removing that call fixed the issue.