Не корректно работает z-index на Android 4.2

[ishurgaya]

Не корректно работает z-index на Android 4.2

 

Даже если взять пример с сайта бутстрап: http://getbootstrap.com/examples/theme/

 

Там есть верхнее навигационное меню ,которое при прокрутке страницы остается видимым, в нормальных браузерах.

 

У навигационного меню задан стиль z-index:1030

 

Но если открыть эту же страницу на Android 4.2 (телефон, планшет) , то при прокрутке страницы верхнее навигационное меню становится невидимым, т.е. перекрывается контентом страницы.

 

Очень надеюсь на вашу помощь ,так как точно такая же проблема возникла на моем сайте.

 

что делать с z-index или заменить на какой то другой стиль?

 

 

[Switch74]

1. Проверьте на андройде какие z-index устанавливаются через инспектор.
2. Попробуйте меню перенести в конец.

[ishurgaya]

проверяю через Ghostlab там показывается ,что z-index тот же на компе и телефоне.

 

Ghostlab - это удаленный инспектор кода для сайтов на любых устройствах.

 

А зачем меню вниз переносить?

[Switch74]

Ну вы попробуйте и мы узнаем - поможет это или нет

 

Кста z-index нужно было проверить не только у меню

и каким браузером вы пользуетесь на андроиде? У меня все норм отрабатывает в chrom

[ishurgaya]

я про дефолтный браузер у android 4.2.

Edited January 14, 2016 by ishurgaya

[ishurgaya]

переносил меню вниз все равно не отображается.

 

заметил что меню пропадает если у меню прописано position:fixed и z-index, меняем fixed на static или другие ,то меню становится видимым.

 

но мне нужен именно fixed

[Switch74]

Возможно у дефолтного браузера проблема с fixed + z-index, можно проверить установив другой браузер

[ishurgaya]

пытаюсь скачать google chrome через гугл play.

Google Play - Your Device isn't Compatible with this version.

 

Ну в общем версия не поддерживается.

 

а вы как скачали гугл хром?

Edited January 15, 2016 by ishurgaya

[klierik]

то при прокрутке страницы верхнее навигационное меню становится невидимым, т.е. перекрывается контентом страницы.

 

.content {    position: relative;    z-index: ($nav-menu-z-index - 1);}

[ishurgaya]

В общем сделал как написано в этой статье: http://habrahabr.ru/post/162841/

 

установил js ,который проверяет поддерживает ли браузер position:fixed.

 

если не поддерживает то меню присваивается position:absolute, а если поддерживается fixed , то fixed  и остается.

 

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