Question

i’m making an app for ios and android using phonegap and html.
In my layout, i’ve a div with a list which have overflow content.
To be able to scroll it, i use -webkit-overflowscroll:touch; and the overthrow js polyfill for devices which doesn’t support this feature.

This work very well on ios.

But on Android, i’ve a bug.
When testing on Android 4.1 which supports the feature “-webkit-overflowscroll:touch;”,
the scroll work well the first time, but if i click on an item after scrolling, the scroll jump up, and i can scroll the list longer than the list size (so i can scroll down it to get the items disapearing from screen)
Like that the scroll has been double sized…

Here is the basic markup

<div class='page'>
   <div class="contain">
       <ul><li><a></a></li></ul>
   </div>
</div>

My List is fill dynamically by an ajax loading i apply to the .contain the css “overflow-y:auto;-webkit-overflow:touch;”

I scroll only the .contain div and not the body (which have the overflow hidden property)

any suggestion ?
thanks

Answer 1

I had the same problem and in my case I’ve changed the class of the list item to show a down state. When I removed the code to do that, the list selection works fine.