Z-индекс не работает на вкладке Samsung Galaxy?

Question

Я работаю над этим проектом для рабочего места, где электронное обучение будет проходить на вкладке Samsung Galaxy. игра просто веб-сайт, но будет отображаться как приложение.

При первом входе в систему вы увидите всплывающее окно с этим приветственным сообщением, за которым находится черное наложение с прозрачностью.

Проблема в том, что на ПК, в то время как на firefox все работает отлично, но на планшете Z-index не работает. его невозможно отладить, и я не смог найти никакой документации по этому вопросу. Так кто-нибудь знает, работает ли z-index по-другому на планшете или как это исправить?

Всплывающее окно имеет z-индекс 999, а наложение - z-индекс 998, Есть идеи по этому поводу? Я продолжу поиск в Google и опубликую все мои успехи.

Edit: Оверлей будет создан в Jquery: var showPopup = '<% = ViewData ("showPopup"). toString ()%>'

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

Решено, см. Комментарий к решению.

Answer 1

Поздно к вечеринке, но я нашел лучшее решение для этого было добавить -webkit-transform: translate3d (0,0,0); к элементу, который находится в абсолютном положении и Z-индексирован. Решил мою проблему каждый раз.

Answer 2

Найден ответ, ответ был частично на stackoverflow, можно найти здесь: Android Webkit: Абсолютно позиционированные элементы не учитывают z-index

Остальное было найдено в учебнике.

Решение было следующим:

Я добавил оверлей в jQuery, но всплывающее окно было в html, но просто скрыто.поэтому я добавил эту часть кода также в проверку jQuery.Чтобы всплывающее окно не унаследовало непрозрачность наложения, мне пришлось снова использовать $('body').prepend.Теперь все работает.