Z-index not working on samsung galaxy tab?

Question

Im working on this project for work atm where an e-learning will be played on the samsung galaxy tab. the game is just a website but will be showed as app.

When you log in for the first time you will see a popup with this welcome message, behind it is a black overlay with transparancy.

The problem is that on the PC while on firefox it all works great but on the tablet the Z-index doesnt seem to work. its impossible to debug and I couldnt find any documentation on this issue. So does anyone know if z-index works differently on the tablet or how do I fix it?

The pop up has z-index 999 and the overlay is z-index 998, Any ideas on this? I will continue my search on google and will post all the progress I make.

Edit: The overlay will be created in Jquery: var showPopup = '<%=ViewData("showPopup").toString()%>'

if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }

Solved now, see comment for solution.

Africander

Found the answer, the answer was partially on stackoverflow can be found here:#2562706 The rest was found in an tutorial. The solution was the following: I added the overlay in jQuery but the pop up was in the html but just hidden. so I added that part of the code also to the jQuery check. To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now. had to put in in here since im not allowed to answer my own questions yet :( – Africander

I will post the solution above as answer in 6 hours when I can ^^ – Africander

Answer 1

Found the answer, the answer was partially on stackoverflow can be found here: Android Webkit: Absolutely positioned elements don't respect z-index

The rest was found in an tutorial.

The solution was the following:

I added the overlay in jQuery but the pop up was in the html but just hidden. so I added that part of the code also to the jQuery check. To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now.

Africander

Answer 2

Late to the party but, I found the best solution for this was to add -webkit-transform: translate3d(0,0,0); to the item that is absolute positioned and z-indexed. Has solved my issue every time.

Socher

This worked for me with Samsung Galaxy S2 running Android 4.0.4 – Fango