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.

Answer 1

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.