jQuery Mobile Listview is too slow with iScroll

Question

I am making an app with PhoneGap 1.3.0 and Jquery Mobile 1.0. To scroll a listview I want to use iScroll but scrolling performence is too bad. Scrolling is too slow.

Also I made some test.

If I use the code without jQuery Mobile it is fast

<div id="scroller">
    <ul id="thelist" >
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

...

But if I add jQuery Mobile type listview like.

<div id="scroller">
    <ul id="thelist" data-role="listview" data-inset="true" data-theme="c">
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

It is slow. How can I fix it?

Answer 1

You can remove the -down and -hover CSS styles from the style-sheet for jQuery Mobile. When you scroll a list you are "hovering" your finger over a list-item which triggers it to change it's styling due to the -hover class that is applied. If you change the -hover class to be the same as the -up class then no redraws will occur and scrolling will be much smoother. I have tested this and it worked great on my Android 2.3 device.

Here is an example of what I mean, notice the -up/-down/-hover versions of the class rules:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {
    border: 1px solid       #000 /*{a-bhover-border}*/;
    background:             #444444 /*{a-bhover-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bhover-color}*/;
    text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
}

.ui-btn-down-a {
    border: 1px solid       #000 /*{a-bdown-border}*/;
    background:             #3d3d3d /*{a-bdown-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bdown-color}*/;
    text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
}

UPDATE

So to make the changes I've suggested it's as simple as downloading the jQuery Mobile framework, opening the non-minified version of the CSS style-sheet (also found here: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css), and deleting the -down and -hover classes.

You can download jQuery Mobile here: http://jquerymobile.com/download/

Basically, look for all of the .ui-btn-***-* class declarations and delete the code inside the ones where *** equals hover or down, and there will be multiples because there is one for each theme, that's what the last * is for, a-e.

The above CSS would look like this when you're done:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {}

.ui-btn-down-a {}

Notice I did nothing to the .ui-btn-up-a class, it is the default class and I don't want to change the look of the page, I just want to stop the browser from redrawing the document when scrolling a list.

When you are all done editing the CSS style-sheet, copy the code and paste it into http://htmlcompressor.com/compressor.html, choose the "CSS" option on the right, and click "Compress." That will create a minified version of your CSS style-sheet that is ready for the production environment (this will greatly reduce the size of the code).

Answer 2

removing .ui-btn-hover-x and .ui-btn-down-x did not make any difference for me.

jquery.mobile-1.1.1

removing the content wrapper fixed it for me.

<div data-role='content'> </div>

it scrolls just as smooth as a webpage in safari.

Answer 3

Look into CSS3 transform

With the hardware acceleration enabled, the jqm listview with iScroll is scrolling like it's sitting on a butter now.

This behavior seems happened on mobile devices only.

I've made a fiddler here to show you how it works: (Use a mobile device to see the difference) http://jsfiddle.net/SuY7f/1/

This code is tested with Cordova PhoneGap 2.4.0