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

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

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

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

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

Изменить: оверлей будет создан в Jquery: var showPopup = '‹%=ViewData("showPopup").toString()%>'

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

Решено сейчас, см. Комментарий для решения.


android html css z-index galaxy-tab
person Teun Pronk    schedule 28.11.2011    source источник
comment
Нашел ответ, частично ответ на stackoverflow можно найти здесь: stackoverflow.com/questions/2562206/ Остальное можно найти в учебнике. Решение было следующим: я добавил оверлей в jQuery, но всплывающее окно было в html, но просто скрыто. поэтому я добавил эту часть кода также в проверку jQuery. Чтобы всплывающее окно не наследовало непрозрачность наложения, мне пришлось снова использовать $('body').prepend. Теперь все работает. пришлось вставить сюда, так как мне еще не разрешено отвечать на мои вопросы :(   -  person Teun Pronk    schedule 28.11.2011
comment
Я отправлю решение выше как ответ через 6 часов, когда смогу ^^   -  person Teun Pronk    schedule 28.11.2011

Ответы (2)


arrow_upward
10
arrow_downward

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

person PHIN    schedule 16.05.2013
comment
Это сработало для меня с Samsung Galaxy S2 под управлением Android 4.0.4. - person オスカー; 01.07.2013

arrow_upward
0
arrow_downward

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

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

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

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

person Teun Pronk    schedule 29.11.2011