0

I have an HTML5/jQuery Mobile app that I am developing with PhoneGap. I have deployed this app to iOS successfully and am now porting it to Android.

I have run into some strange behaviour when testing this app on my Android device, which is a Samsung Galaxy S2 running Ice Cream Sandwich.

I have a list of elements contained within a div, and that div has a fixed height. It also uses the CSS property overflow-y: scroll to allow the mobile user to scroll through the list. The list contains anchor links. Like this:

<div style="display: block; width: 320px; height: 250px; overflow-y: scroll;">
    <a href="index1.html">Link 1</a>
    <a href="index2.html">Link 2</a>
    <a href="index3.html">Link 3</a>
    <a href="index4.html">Link 4</a>
</div>

When the list of anchor links is still within the standard height of the box (i.e. if the list only has a few elements), it works fine. You can tap on the links and they function as expected. However, when the list of links expands beyond the height of the box and overflow-y scrolling takes effect, I can no longer tap on the links. The scrolling works perfectly, but I can't tap on any of the elements within the scrolling div!

Oddly, something else I cannot do with any of the links is select them using the browser's text selection capabilities. It's possible when there are too few links for scrolling, but not possible when the scrolling is active.

I had assumed that a Galaxy S2 with ICS would be new enough to properly support overflow-y scrolling but perhaps I'm wrong. Any idea on how I can get this to work? I can't seem to find anything specific online in regard to bugs or support for overflow-y in Ice Cream Sandwich.

2 Answers2

0

Can you attach a tap event handler to those links directly? With jQuery Mobile links aren't as simple as they look.

Since you started with iOS, is there any iOS-specific css left in there? To get the nice scrolling on iOS you sometimes have to add a 3d transform to trigger hardware acceleration, but that can have some interesting side effects on android.

Another thing that may be worth trying is setting overflow instead of overflow-y - it shouldn't be different, but sometimes it is.

Tom Clarkson
  • 16,074
  • 2
  • 43
  • 51
0

I know this is an old question, but I think the solution could be helpful because it still happening with the current version of phonegap/cordova:

To fix this problem you have to add a transform property to the fixed element, the main div in your case:

div {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0, 0, 0);
}

Credits here

Community
  • 1
  • 1
andresigualada
  • 131
  • 5