Меню гамбургера не отображается на мобильном телефоне Safari

Question

У меня проблема с отображением моего сайта в Safari на iPhone.

Отлично работает на Chrome и Firefox на мобильных экранах. В Safari div с меню гамбургера исчезает.

Посмотрите на скриншоты ниже:

Сайт на Chrome / Firefox:

Сайт в Safari:

Есть ли у вас какие-либо идеи, почему он ломается в Safari? Буду очень признателен за любые советы.

Вот ссылка на сайт: https://sylwiavv.github.io/blood-donation-landing-page-starter-master

Вот ссылка на исходный код: https://github.com/sylwiavv/blood-donation-landing-page-starter-master

Спасибо!

Answer 1

Это из-за overflow-y: hidden в style.css ( Репо ) строки 169.

  .overlay{
    height:100%;
    width:0;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    background-color:#f995c2;
    /* overflow-y:hidden;          /* Remove this line */
    transition:0.6s;
  }

Удаление работает!Даже установка правила с соответствующими width и height, как это работает:

.overlay{
  height:75px;
  width:100%;
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  background-color:#f995c2;
  overflow-y:hidden;
  transition:0.6s;
}