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.

Found the answer, the answer was partially on stackoverflow can be found here:http://stackoverflow.com/questions/2562206/android-webkit-absolutely-positioned-elements-dont-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. had to put in in here since im not allowed to answer my own questions yet :( — Teun Pronk, Nov 28 '11 at 11:19
I will post the solution above as answer in 6 hours when I can ^^ — Teun Pronk, Nov 28 '11 at 11:26

score 10 · Answer 1 · answered May 16 '13 at 01:51

10

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.

answered May 16 '13 at 01:51

PHIN

101
1
4

This worked for me with Samsung Galaxy S2 running Android 4.0.4 – Oskar Jul 01 '13 at 09:23

score 0 · Accepted Answer · edited May 23 '17 at 10:27

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.

Z-index not working on samsung galaxy tab?

2 Answers2