CODEWITHSUNDEEP
javascriptandroidcsscordovascroll
Spittal
Spittal

Reputation: 779

Android Phonegap Scroll is Very Choppy

I'm building a very basic webapp that displays ferry schedules.

I'm using phonegap to port it to a "native" app on Android and I'm have a bit of trouble with the scrolling.

It works perfectly in Chrome on the device, as well as on the android browser. I've tested on several devices and they all work great in browser. As soon as I put the project into Phonegap however the scroll becomes very "choppy" and skips and sticks. I've added a video link to show you the behaviour:

http://youtu.be/D18s9kgnD7g

I'll give you a brief explanation of how it works:

We're using translate3d CSS methods for transitions when we switch content in view so that we avoid using page transitions. Because of this we're not scrolling the actual page we're scrolling individual content divs so that we avoid weird scrolling bugs when switching between content views. Basically we have three "content views" on one page that switch out when we want to switch views.

Here's a link to the app:

http://ferriesapp.ca/app/

Things I've tried

We're using "overscroll: scroll;" one these content divs, which I know had some incompatibilty with Android pre 2.3 but should be good now.

We've tried a few big libraries, like iScroll and Scrollable, and things like that to no avail.

I've tried preventing default actions for touchmove.

We've coded correct touch events using Zepto's touch module.

I've tested on devices from the Nexus one (4.0.4) to the Nexus 7 (4.3) and it's the same story on all those devices.

Any help would be STRONGLY appreciated

I've been struggling with this for a while now and I can't seem to find anything on the internet that hits on this "choppy" scrolling bug.

EDIT: Here's a logcat from installation to when the scrolling bug happens: http://pastebin.com/Aa7mDeAX

Upvotes: 1

Views: 3870

Answers (2)

Noogen
Noogen

Reputation: 1652

You got a pretty nasty style sheet there. First, you do not want any box shaddow because mobile does not like that. Then, since you have a lot of blank spaces, you want to help touch to work better with those blanks with user-select: html.

* {
    margin: 0;
    padding: 0;
    -webkit-user-select:html;
    -khtml-user-select:html;
    -moz-user-select:html;
    -ms-user-select:html;
    user-select:html;
}

That should help with your scrolling, but you still have tons of thing to clean up with that CSS. Another issue is that you don't even have cordova loaded correctly, but that probably doesn't really matter for scrolling.

Actually, what is zepto_002.js? That seem to be the one that is causing the main scrolling issue.

Upvotes: 1

Sam Sausage
Sam Sausage

Reputation: 1

As a fellow google play developer, having "three "content views" on one page that switch out when we want to switch views" is not a good idea. my only input though if you want to go this path would be to check this out http://pocketnow.com/2012/05/25/what-is-force-gpu-rendering-in-ice-cream-sandwich

Upvotes: 0

Related Questions