Elements with overflow cannot be scrolled on device

[Robert Schroll]

When there is a single long list in an app, it can be scrolled by flicking on the device. But if there are two lists, absolutely positioned and set with overflow: auto, they cannot. On the desktop, both lists scroll. In a browser, they even get scrollbars. But on the device, they are stuck at the top. The attached test case demonstrates the problem.

Two caveats:
1) This is based only a testing on an emulator (r226). It seems to get flicks in other contexts, so I don't think it's an emulator issue. But if you test on a device and things work, then it must be.
2) I haven't tried other ways to position the lists, so I don't know how specific this problem is to the CSS I'm using.

[Adnane Belmadiaf (daker)]

Confirmed by Alan Pope, i am not really sure why this happening, i tested the code on Chrome & FF for Android and it works as expected.

[Robert Schroll (rschroll)]

I don't think the absolute positioning is actually coming into play. The problem seems to be that elements with overflow can't be scrolled by flicking. The attached test case give just a single list that's in the default flow of the document. It's in a container with a fixed height and overflow: scroll. It cannot be scrolled on the emulator.

[Adnane Belmadiaf (daker)]

I think this is a qtwebkit bug, the same code works on Chrome and FF for android

[Robert Schroll (rschroll)]

In case anyone else is trying to work around this bug, here's the kludge I came up with: https://github.com/rschroll/crosswords/commit/ed96ec1030744eea255164d8a5ac4e4aa2cb3618. It uses hammer.js to detect drags and scroll the elements in response. It's not general or robust, but it works for my purposes.

[Daniel Beck (d-danielbeck)]

I observed the same problem. The problem also happens when the position is set to absolute.

This behavior makes developing games with javascript and DOM manipulations quite difficult, because games often use absolute or fixed positioning.