Why jquerymobile is not good enough for our current application

Yesterday I wasn't able to explain here what I've found testing jquerymobile and iScroll together, but as I promise I'm here today to tell you what happened.

First of all I want to say a little disclaimer. What I'm writing here is my opinion based on my experiences. If I say "doesn't work", perhaps I should be more polite saying "doesn't work for me"... and perhaps it's my mistake being so fool to make it work properly. But hey! This is The App Inventor's blog, so as far I don't critizice him I believe I can do that ;)

Why did I try to put together jquerymobile and iScroll? If you tried to work with PhoneGap for anything far than a "hello world" and you need to scroll your mainpage, you see a disgusting effect. The page scrolls far than its limits... just like when you're browsing a webpage!!. It's pretty obvious you are just embedding a webview on a container and I believe it's not good for users perception.

So I started to find a way to make my users experience better, and found we can avoid scrolling with a simple event.preventDefault(); attached to touchmove event. Great, no more scrolling out of boundaries... but no more scrolling anytime, at least with common gesture. I tried to set-up a div container with "overflow:scroll", but no luck until i've found iScroll.

iScroll works nice as far as you don't put a lot of elements into the container. Also I've found a "minor" flaw, being unable to override the issue of check the DOM for changes for itself. That made iScroll to calc more than it needs, so it lowers down performance. But it's still a good choice and a sacrifice I can do without so much less of performance.

I wanted to use jquerymobile just for my layout. First screen in the app will ask the user to choose for a location, and it seems the most natural way showing available locations in a list, the user can scroll (using iScroll) and choose to continue to next step in the app. My list was dynamic, building it getting information from a JS and appending li elements on my previously defined and empty ul.

That's how I understood how jquerymobile works from inside. It doesn't have a stand-alone css collection to skin the components, just it relays on its JS to skin them... so after building the list, I need to ask the framework to "skin it" via #mydiv.page(); to render it.

When I do that, seems boundaries of iScroll doesn't update properly, so I have to ask iScroll to get them handly with a call to myScroll.refresh(); and... it works, but it's to heavy for little processors on some "old" mobile devices and navigation is not as fluid as it should be.

I hope jquerymobile developers will evolve their product a lot (let's remember it's alpha 2 at this time), but currently is not an option to work with in the scenario I described before, so for now I'm keeping it on my toolbox for another usages and I'm looking to build (or find) a better way to skin my scrollable lists, preferably using pure CSS if possible.

Have anyone out there found a good solution to this issue? Let me and The App Inventor know!