Android browser / Samsung Galaxy SII scrolling bug on web forms. Select list hitboxes don't scroll

Question

EDIT: I've uploaded a video to youtube demonstrating the bug here: http://www.youtube.com/watch?v=zkDYlgtX5Hk

I've got a really weird bug that I found testing my new web application on a Samsung Galaxy S2 running Android 4.03 ICS.

What happens is that when you load a form in the default web browser and then scroll down the page, the hitbox/touchable area seems to stay where it was on screen when the page first loaded, even though the form element itself has scrolled up the screen.

As far as I can tell with the few testing devices I have available, I think this only happens on the Samsung Galaxy S2 as I have tried it in the Android simulator with the same version of android and was unable to replicate the problem. I know this makes it a very specific user base that haves the problem however last I checked the Galaxy s2 was the most popular Android handset in my country (Australia) so it would be nice to find a fix.

I have created a very simple page to demonstrate this at http://users.tpg.com.au/geoffica/test.html

You can replicate the problem by doing the following:

1. Load the page on a Galaxy S2
2. Scroll the browser so that page completely fills the screen and the address bar is just off the top of the screen.
3. Where the select box is, place your finger to the side of the screen as a marker of where the select list was.
4. Scroll down the page any distance, (while still keeping the select list on screen) then touch the whitespace where the select list used to be and the options should come up on the screen. It may take a few attempts to get it but it will happen.

Now I know you are thinking this is quite tricky to replicate and likely rare that it will happen, but on a form I built for a client because of where the elements were positioned, the hitbox always overlapped the submit button of the form, making it very difficult to hit the submit button. Select lists will also steal touches from other select lists if the hitboxes overlap, making the wrong options appear when touched.

I've tried many things but the only workaround I've found so far is to use the touchstart event to trigger my submit button instead of the click event. This seems to happen before the click event of the select lists and prevents it from getting in first, but this is far from ideal and doesn't stop the select lists from stealing clicks from other elements on the page.

I've also thought about rolling my own jquery plugin to maybe place the select lists offscreen and then trigger their click events by touching a link or something. If it's a mobile device then the options will come up on screen regardless of the position of the select list. This would be quite cumbersome however and I would need to factor in the effect this would have on users coming from a pc or iPad for example which shows the options in a dropdown list instead. It sounds pretty problematic to me. May even require some Galaxy s2 specific browser/device sniffing.

Does anyone have a real workaround for this, apart from just not using select lists?

Answer 1

Are you by any chance using absolute positioning for it? this will fix to a certain area on the screen not the page.