Android - Browser/WebView - Hovering/zIndex (?) Issue when iScroll is activated

[RonMen]

Hi there. It seems I run into an issue using Android Browser and same using source code packaged within an WebView application. The issue is really strange since Android is the only platform and browser I saw this.

To explain the issue I will add some picture with and without iScroll added to a specific scrolling area:

Screenshot with iScroll:

Screenshot without iScroll:

Somebody knows what is causing this issue? Something buggy in Android browser/WebView?

THX for any hint.

[cubiq]

try to add translateZ(0) to the container of the upper layer. Or check the z ordering of elements.

[RonMen]

Changing CSS z-index doesn't seem to work, also the CSS translateZ(0) doesn't seem to change anything. If I use the zoom: true option when initializing iScroll it would work, but I do not want to zoom/scale the content. Also using zoomMax: 0 together with it seems to be little buggy since the scolling content gets hidden when "zooming" and will be shown when stoping the "zooming" with 2-finger touch.

[RonMen]

I commented + translateZ in line #294 to the following and it seems working:

this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')'/* + translateZ*/;

Wondering what it might brake if it would be removed in general in this line to fix this issue?

[cubiq]

you are loosing hw acceleration (on browsers that support it)

anyway this seems an issue related to the app CSS. playing with styles I bet you can solve your issue.

[cubiq]

it might also be the fact that all the scrollers have 0 as translate3d. you might try to give 0 at the bottom one and 10px to the top

[RonMen]

I played with all z-index to get the pulldown on top of the scroller but it doesn't seem to work. I can't understand such behaviour caused with only the translateZ(0).
What do you mean with the last comment to give 0 to bottom and 10px to top, of what, the vertical scrollbar? I tried it and it isn't working.

[cubiq]

give me access to a demo page and I'll have a look at it

[RonMen]

OK. I got it working after trying some other container's CSS. I added -webkit-transform: translateZ(0); to the pulldown container and now it is hovering the scroller area content also on Android like expected.