Android Stock Browser Not Respecting CSS Overflow

Question

I'm working with a client who would like part of their interface to have a somewhat customized method of scrolling. They don't want the usual scrollbars to be visible; they want desktop / laptop users to scroll with their mouse wheel / touchpad and they want mobile users to scroll with their finger. They also want graphics of an up arrow and a down arrow to provide an alternate method of scrolling and also to make it obvious to the user that scrolling is possible (since the actual scrollbars are hidden). The client is set on this method of scrolling.

I put together some code that works on all device / browser combinations that I've tried it on except for Android's stock browser. I have confirmed this issue with the following configurations:

• Android 4.1.2 (emulator)
• Android 4.2.2 (actual device)
• Android 4.2.2 (emulator)
• Android 4.3 (emulator)

This issue is not present on Android 4.4.2 (emulator), though.

In order to keep things simple for this question, I'm not including the graphics of the up and down arrows and the accompanying logic.

Here's the code (jsFiddle demo):

When you tap on any of the three options, a second list of options should appear to the right. However, it never appears on Android's stock browser unless you remove overflow-y: scroll; from the ul CSS rules, but then you can no longer scroll.

The problem is best illustrated by replacing left: 150px; with left: 25px; in the .category CSS rules. When I do that, this is what it looks like in a working browser:

And this is what it looks like in Android's stock browser:

One other thing I should note is that it works in Chrome for Android.

Is there a way that I can make this work in Android's stock browser?

Answer 1

I've had issues with the stock Gingerbread Android browser. It does not handle the overflow CSS property well at all. In order to enable scrolling on this browser I had to apply the overflow ("scroll" or "auto") to the BODY container only.