Проблема с боковым меню - только на IPhone 5с

Question

Здравствуйте, коллеги-разработчики! Первый крик о помощи здесь.

Я сталкиваюсь со странной ошибкой на моем веб-сайте при отображении на IPhone 5s. У меня есть мобильное боковое меню, которое расположено абсолютно и имеет z-индекс 1000. Оно скользит слева на экране, когда пользователь щелкает значок меню гамбургера. Он отлично работает на настольных компьютерах, iPad и мобильных устройствах Huawei, но на моих IPhone 5s это выглядит так: Домашняя страница Страница раздела Правильная версия

Похоже, что он охватывает заголовок, но не перекрывает основной раздел. Вот как выглядит элемент:

  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  opacity: 1;
  width: 0;
  min-height: 100vh;
  height: 100%;
  z-index: 1000;
  transition: 300ms;
  display: flex;
  flex-direction: column;

Вот ссылка на репозиторий github моего сайта: https://github.com/djlens/Maciek-Martyka-website/tree/master/website

Заранее спасибо, я буду признателен за любые помощь!

Answer 1

Если кто-то боролся с той же проблемой ...

Мне пришлось вывести весь раздел div бокового меню из HTML традиционного потока. До того, как он содержался в разделе <header>, что, по-видимому, мешало его содержимому <main>. Затем я переместил его в <main>, а затем наложил на него содержимое <header>. В конце концов, то, что исправило ошибку, полностью удалило ее из потока и поместило между <header> и <main>. Боковое меню расположено абсолютно.

Это была IPhone 5s конкретная c проблема, и вышеуказанное решение ее исправило. Не было проблем с отображением сайта на более современных устройствах, таких как IPhone 6 или IPad.