jQuery Forum

Of course it's difficult to evaluate without being able to try the app, but I see the website is jQuery Mobile as well. So, I visited the site with my iPhone 4S and installed to the home screen. (A little closer to PhoneGap than the web site, since full-screen and UIWebView don't JIT-compile the Javascript. So, it will be faster in Mobile Safari.)

I see you are using JQM 1.1, but still using jQuery 1.6.4. Probably will not make a lot of difference, but it might be worthwhile to update to jQuery 1.7.1.

You are suffering from the "piano keyboard" effect in the listviews when you scroll, which I *thought* had been fixed in 1.1 (and doesn't occur for me). But I also set the hover styles to the same as up styles so then this is definitely completely eliminated.

The piano-keyboard is very annoying and it's not surprising they would reject on this basis.

You need to pre-cache your list items. Apply -webkit-transform: translateZ(0) to your <li> elements in your listviews. Otherwise, you are going to get the stuttering that you see until the user has scrolled down completely to the end of the list. (Try it: you will see what I mean.) I did a lot of experimenting to determine the optimum way to hint webkit to cache. In a listview with typical-size items, you can get away with applying the transform to only the LIs. More than that, and it will start to slow you down on initial load. (And it's not necessary.) Of course, then you are still left with the piano-keyboard, but you will see a difference.

Dump the gradient on the listview items. It's computationally expensive. Ditto for text shadows.

Not sure why it's possible to scroll the whole page up once you reach the top or bottom of the list. You may need to bind to touchmove on the page and call preventDefault().

Yes, the transitions between pages are crappy. And this is on a 4S. Search the forum on how to revert to 1.0 transitions. The scroll to the top between pages is annoying and senseless to a user.

The scrollbars don't make much sense, because they extend to the full height of the screen, but you are only scrolling the portion between the header/footer.

Lots of flashes of unstyled background (checkerboard).

It doesn't really seem slow to me. even on the website, so not sure what they are getting at there. If you have any longer lists than the "Athletes" page on the website, though, you are going to start to have trouble with JQM 1.1 listview performance bugs, unless you obtain a newer or patched version with fixes. I scrolled down to the bottom of the list and tapped an item, and the page came up quickly. (The bug gets worse the further down you go in the list.)

I occasionally see the header "blink out" during scrolls, not sure what that's about.

OK, on to an iPhone 4...

Wow, this really falls apart on an iPhone 4 (with iOS 4.3.5). No fixed headers/footers at all. Piano keyboard is worse. It's slower, but I still wouldn't call it slow. (So, on that part, if you get a different reviewer, you may be OK.)

Do you have native tabbars and navbars in PhoneGap? I'd sure use them if you have them. (But I don't know if you already are in the PhoneGap app.)

------
You might want to give my jquery.mobile.iscrollview plugin a whirl. If not, you will still get some ideas on CSS and other optimizations from the documentation:

github.com/watusi/jquery-mobile-iscrollview

I think it might solve some of your issues. It will fix the header/footer with scrolling of the page. It will eliminate (or at least make non-visible) the scroll to the top on transitions (because you would be using a fixed-height page the size of the screen, so nothing to scroll),

I'd reject it too if I were them. At least it isn't your fault. There are a lot of people in the same boat.

First off, thank you for the lengthy and awesome response. Definitely some golden nuggets of knowledge. I actually made almost all of those improvements/hacks when I had it as a phonegap'd app. I removed them after porting it back to a web app, but will probably put those back in place now.

Too bad your link doesn't work anymore.

Thank you watusiware for all the great tips.

I've tried them. It helped when hitting the back button to go back to a page which has a list, an image, a simple text (within a span) and a <p> (otherwise there was quite a lot of blinking) :

li,#ecnt p, #ecnt img, #ecnt span { -webkit-transform:translateZ(0);}

I've also included the 1.0 transition (although I think it's only available for IOS which is OK for now but the same will be required when I want to port on Android).

Just a question about the listview styling. Is is better to override JQM's css (and which class/element should I override) or just remove it from the original css (I've already removed panels, sliders and some transitions and dialogs I didn't need to speed things up) ?

BTW, it would be good to have a page of all the people who've successfully submited to the App store to share all the tips they used. I'd be more than happy to share mine.

Thank you so much for this advice.