Mobiscroll + Samsung Galaxy S3 + position: fixed = Broken scroller?

Question

We are using Mobiscroll on our mobile website and it works just fine, except on one device: My boss' Samsung Galaxy S3 (runs stock Samsung fw and stock browser, but Mobiscroll works fine with Chrome). It looks like the z-index of all the elements get messed up.

It looks like this: http://pix.toile-libre.org/?img=1350013732.png

Everything is dark and hard to read, and the numbers go over the arrows.

I played a bit with the CSS and removed the transparent background of the page, which made all the colors go back to normal (I was not able to make it go behind as it should for some reasons). But the numbers of the wheels still goes in front of the arrows.

I played even more with the CSS and figured out that the -webkit-transform3d makes the wheels go in front of everything, like if it had it's own layer on top of everything.

After a while, I finally found that the problem is caused because my menu bars have "position: fixed;" on them so they stick to the viewport. As soon as put them to something else than "position: static;", the browser seems to mess up everything, including Mobiscroll.

I need to keep these menus fixed, and there are other elements in the page that will get "position: absolute;"

Any idea how I should solve this? Should I hack the CSS and JS of Mobiscroll to get rid of the transform3d and the background so it appears to work not bad, or is there a better solution for that horrible device?

Please tell me if you need anything else!

Thanks!

Answer 1

It appears that this is an android 4.0 bug. There is a bug report on it here: http://code.google.com/p/mobiscroll/issues/detail?id=96

Answer 2

I face this problem also.. its sucks.

The only solution ive found, is to use mobiscroll onShow & onClose events, to hide and show this position fixed element which cause the overlays problem (in may case that was the footer that was position fixed).