Results 1 to 9 of 9

Thread: DataView list scrolling choppy during initial scroll

  1. #1
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Answers
    1

    Default DataView list scrolling choppy during initial scroll

    I've got a DataView that displays a grid of images using an itemTpl similar to:

    Code:
    itemTpl: '<img onload="javascript:console.log(\'Loaded {src}\')" alt="image" src="{src}" />'
    The images are "float"ed left with some padding, are all the same height and width, and result in a grid that is 3 images wide on the iPhone and 4, 5 images wide on the iPad, in portrait and landscape mode respectively.

    The DataView is hooked up to a store that retrieves JSON data via an Ajax Proxy. I have a listener on the Scroller bound to the "scrollend" event that loads the next page of images when the bottom of the DataView is reached. This all works as expected, however, every time the "next page" is retrieved and loaded, scrolling through the new items is pretty choppy (scrolling through the initial page is also choppy). After the initial scroll, subsequent scrolling is much smoother. The problem isn't solved if I simply wait until all of the images have been loaded (which can be seen via the "Loaded xxx" console messages). I've also updates the image to use src.sencha.io and have all of the images now coming it at under 5kb each, but even scrolling through a list of 25 images is still choppy.

    Is there a way to get the scrolling smooth or is this just a (device) limitation? I've tested this on both iPhone 4 and an iPad 2, with the same behavior. On Safari and Chrome, however, the choppiness is almost unnoticeable.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    If you want a second or two to scroll is it ok? Sounds like the device could be rendering the images and laying them out.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Answers
    1

    Default

    I just did a test with an initial page of 100 images. Loaded the app, let the page of images "load" and waited for a minute and the scrolling is still choppy. The choppiness appears to be occurring as new images come onto the screen even though they have been "loaded". Just like before, once a set of images has been "viewed", scrolling through that section subsequently is much smoother.

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Answers
    1

    Default

    As another test, I set the JPEG quality from src.sencha.io to 10. The images now look horrible but they are all less than 1kb. Somewhat unfortunately, the scrolling is now much smoother--still not perfect and still not as smooth as on subsequent scrolling, but much better.

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Answers
    1

    Default

    To further test this issue, I created a simple html file with the images hard coded and some minimal css. Note the use of "overflow-y: scroll" and "-webkit-overflow-scrolling: touch":

    Code:
    <html>
    <head>
        <meta name="apple-touch-fullscreen" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <style>
            body {
                width: 100% !important;
                height: 100% !important;
                overflow: hidden;
            }
            div {
                width: 100% !important;
                height: 100% !important;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }
            img {
                float: left;
                width: 82px;
                margin: 12px 0 0 12px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="http://content6.flixster.com/movie/11/13/43/11134356_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/16/11/11161107_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/16/10/11161098_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/15/75/11157588_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/16/13/11161343_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/16/12/11161272_pro.jpg" />
            <img src="http://content7.flixster.com/movie/11/16/24/11162445_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/15/92/11159214_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/16/03/11160390_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/16/05/11160598_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/16/09/11160942_pro.jpg" />
            <img src="http://content7.flixster.com/movie/11/15/25/11152577_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/16/09/11160962_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/16/02/11160244_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/16/25/11162555_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/15/83/11158339_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/15/65/11156544_pro.jpg" />
            <img src="http://content7.flixster.com/movie/11/15/66/11156693_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/15/90/11159072_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/16/26/11162639_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/16/26/11162672_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/15/92/11159258_pro.jpg" />
            <img src="http://content6.flixster.com/movie/11/15/84/11158472_pro.jpg" />
            <img src="http://content7.flixster.com/movie/11/15/65/11156581_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/15/16/11151659_pro.jpg" />
            <img src="http://content8.flixster.com/movie/11/15/81/11158182_pro.jpg" />
            <img src="http://content9.flixster.com/movie/11/15/90/11159075_pro.jpg" />
        </div>
    </body>
    </html>

    The scrolling is perfect; super smooth, no choppiness. It would be really awesome if Sencha had a "native" scroller.

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Location
    Los Angeles
    Posts
    79
    Answers
    1

    Default A (Temporary) Solution

    For anyone else who is seeing this issue, I have a "temporary" solution until/if native scrolling can be used. For every item in the list, apply the following CSS:

    Code:
    -webkit-transform:translate3d(0,0,0);
    Credit for the workaround goes to http://cubiq.org/you-shall-not-flicker. As the post says, use this trick sparingly as it'll increase memory usage, but it makes scrolling acceptable for my use case.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    16

    Default

    Cheers saved a couple of hours of mine.

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Location
    Sacramento, California
    Posts
    75

    Default

    Quote Originally Posted by wnielson View Post
    For anyone else who is seeing this issue, I have a "temporary" solution until/if native scrolling can be used.
    You must be f-kidding me. This is the simplest solution on the planet to the problem I didn't know how to solve (and I tried whole bunch of things). Thanks for sharing!

  9. #9
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    115
    Answers
    2

    Default

    saved me from converting from dataview to list
    hope sencha team do come up for this scrolling issue on Dataview.

    for my case it's a dataview which use dataItem which have 3 buttons (max only 2 button will be displayed at one item row depending on the condition given) and a text.

    with 100 so item and all row showing 2 buttons it's really choppy on latest android device (such as the Xperia in this late 2014 and OS is not the Android 5.0)

    Quote Originally Posted by wnielson View Post
    For anyone else who is seeing this issue, I have a "temporary" solution until/if native scrolling can be used. For every item in the list, apply the following CSS:

    Code:
    -webkit-transform:translate3d(0,0,0);
    Credit for the workaround goes to http://cubiq.org/you-shall-not-flicker. As the post says, use this trick sparingly as it'll increase memory usage, but it makes scrolling acceptable for my use case.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •