PhoneGap + JQM + iScrollView: Choppy Scrolling with large content within "iscroll-content"

Question

i am using iScrollView on my App (PhoneGap, JQM 1.3, Android). Excellent work on this. It's a gem.

Actually I'm testing on a Samsung Galaxy S3.

My first page is large in vertical dimension (round about 6000px) consisting out of a bunch of <div> containers with images (with external src).

These DIV - containers are dynamicly added to the content div, based upon Json-data. Then i'm doing a refresh. Everything is fine so far.

But what i've noticed is, when omitting the data-iscroll attribute in my content <div> , scrolling is much smoother and not choppy at all. But when adding the data-iscroll attribute to the content-DIV, scrolling is choppy.

I thought it was because of the anchor-tag's or the images, so i replaced the div-containers with spans and put some text to it. I copied about 30 spans and watched how scrolling behaves. It is choppy - even though with spans. Then i took just 15 spans and scrolling was a bit smoother. It has something to do with the amount of containers within the content-div.

My markup looks in a more simplified form like this:

<div data-role="content" data-iscroll class="iscroll-wrapper">
    <div class="iscroll-scroller">
        <div class="iscroll-content">
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some more content</p>
          ... more content up to 6000px in vertical direction
        </div>
    </div>
</div>

Can anyone confirm this behaviour? Is there a workaround available?

Answer 1

Ok, finally got the answer from Jon Tara himself. iScrollView is definately only for WebViews with small and not complex markup. Read here