Проблема с Z-индексацией с фиксированным фоном на мобильных устройствах

#javascript #html #css

#javascript #HTML #css

Вопрос:

Это мой первый проект, и я столкнулся со странной проблемой с z-индексацией на мобильных устройствах. Если вы посещаете https://kylemneal.github.io/mfa-repo/index.html примерно на 3/4 пути вниз находится фиксированный фон, который имеет z-индексацию сзади. Это отлично проявляется во всех настольных браузерах, которые я тестировал (chrome, firefox, safari), но на мобильных устройствах фиксированный фоновый z-индекс отображается спереди и размещается по всей странице.

Скриншот: https://www.dropbox.com/s/74urqj3mok9d38d/IMG_2621.PNG?dl=0

При использовании представления устройства во всех трех браузерах я не вижу этой проблемы. Я вижу это только при использовании мобильного устройства. Кто-нибудь видел подобные вещи раньше?

https://github.com/kylemneal/mfa-repo

Комментарии:

1. я в замешательстве — вы говорите, что он z-индексируется «назад», но, похоже, у него сверхвысокий z-индекс 1000?

2. Я протестировал вашу работу на своем телефоне, она работает нормально.

3. Черт возьми, спасибо, что заметили это. Это должно было быть -1000. Я изменил это значение, и теперь фиксированный фон отстает от изображений, но по-прежнему не отстает от белого фона. Посмотрим, смогу ли я это исправить. Все еще очень странно, что это проблема только на мобильных устройствах. Я не понимаю, почему этого не произойдет и на рабочем столе.

4. @carljohnson могу я спросить, какой телефон вы используете? Я пытаюсь выяснить, просто ли это iOS или это просто некоторые, казалось бы, случайные устройства, у которых есть эта проблема.

5. @kneal Я использую Android с браузером Chrome (мой телефон ). Если вы используете IOS, попробуйте запустить свой файл также в Chrome, а не только в Safari.