Android v4.0 CSS translate

Question

Currently I'm developing a webpage for multiple mobile platforms. I use JQuery and JQuery Mobile as library. The page uses only HTML5, CSS3 and JavaScript.

The day picker I'm writing uses the –webkit-transform: transform(0,-20px) function to scroll a list of numbers. This works fine in Chrome, Safari, iOS, Android 2.3.*. But on Android 4.0.1 it changes the order of the different elements. This results in a text jumping in front of the overlay making the spinner ugly. I've tried using the z-index but this doesn't affect the transform animation.

When changing the margin-top instead of the transform works fine on Android 4.0 but I want to use the hardware accelerated css functions.

Is there anyone who could help me with this problem?

Answer 1

Posting some sample code of your css would help alot. I've noticed that android 4.01's browser has some z-index issues that requires some restructuring of your html to get it to work. But until i can see some code i wont be able to troubleshoot anything.