I have an iPhone app built with jQTouch and Phonegap. In my last
update to the app, I added a list item that displays a Google static
map, based on lat/lon coordinates that I access from an SQLite
database in the app. Before I added this list item, the page with the
list scrolled as expected. The toolbar stayed in place, and the user
could scroll the list itself. (I'm using the jqt.bars extension from
DataZombies.)
Now that I've added the static map, when I scroll up, I can't scroll
all the way to the bottom of the page. I can slide the list up with
my finger and hold it there so I can see the bottom (a div with the
jQTouch "info" class), but when I release my finger the page bounces
down a bit and repositions itself so the top of the Google map list
item is at the top of the screen.
I have a short (30 sec) video here: http://dl.dropbox.com/u/20314275/iscroll_gmaps.mov
Notice that the first time in the video that I scroll, the list
behaves fine (so the problem is inconsistent). But each time after
that, the list doesn't scroll properly. It's a problem because I'd
like users to access a clickable link toward the bottom of the page.
Although they can temporarily see it, it never stays on the screen
long enough so they can tap it.
I'm wondering if there's some issue with the static map that causes
this problem? Or is there something with iScroll or jqt.bars that I
need to modify?
Here's the html section that creates the page (I've omitted some of
the list items below for brevity):
Here's the corresponding javascript (also edited for brevity):
