Navbar не отображается на мобильном телефоне iOS - фиксированная позиция

Question

Мой веб-сайт: https://finetim.com/ на мобильном телефоне У меня есть кнопка гамбургера, которая открывает меню с фиксированной позицией. На устройствах android он работает идеально, но на iOS меню не открывается.

css навигационной системы:

@media (max-width: 767px){
.navbar-nav {
     margin: 0;  
    top: -207px;
    width: 103%;
  margin: -54px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 position: fixed; 
    height: 121%;
    left: 0;
    top: 0;   
    z-index: 10;
    -webkit-transform: translate3d(0,0,1px); 
    transform: translate3d(0,0,1px);
}


.navbar-collapse{
	/*Overflow: visible;*/
	position: fixed;
    width: 280px;
    z-index: 999;
    height: 100%;
   /* overflow: auto; */
    padding: 0px;
    background-color: #fff;
    color: #a9a9a9;
    left: -280px;
    top: 0;
    margin: 0;
    cursor: auto;
}
}

<div class="navbar-collapse navbar-ex1-collapse collapse in" aria-expanded="true" style="">
      <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="https://finetim.com/Knigi" class="dropdown-toggle" data-toggle="dropdown">Книги</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">               <ul class="list-unstyled">
                                <li><a href="https://finetim.com/Knigi/Bestsellery">Бестселлеры</a></li>
                                <li><a href="https://finetim.com/Knigi/Ivrit-Tradicija">Иврит Традиция</a></li>
                                <li><a href="https://finetim.com/Knigi/knigi-dlja-detej">Книги для детей</a></li>
                                <li><a href="https://finetim.com/Knigi/Jezoterika-Psihologija">Эзотерика Психология</a></li>
                              </ul>
              </div>
            <a href="https://finetim.com/Knigi" class="see-all">Показать все Книги</a> </div>
        </li>
                                <li><a href="https://finetim.com/KOSMETIKA-MJoRTVOGO-MORJa">КОСМЕТИКА МЁРТВОГО МОРЯ</a></li>
                                <li><a href="https://finetim.com/Magija-kamnej">Магия камней</a></li>
                                <li><a href="https://finetim.com/figurki">Фигурки</a></li>
                                <li><a href="https://finetim.com/fjen-shuj">Фэн-шуй</a></li>
                                <li><a href="https://finetim.com/Suveniry-Izrailja">Сувениры Израиля</a></li>
                                <li><a href="https://finetim.com/Vmeste-s-det'mi">Вместе с детьми</a></li>
                      </ul>
    </div>

желаемое поведение (как оно работает на android): http://prntscr.com/s397d3

текущее поведение: http://prntscr.com/s397xi Как решить проблему?

Я пытался играть с webkit, он также не работает

Answer 1

Я посмотрел ваш сайт и думаю, что добавление следующего к вашему stylesheet.css должно иметь значение:

.navbar-collapse.in {
    overflow-y: visible !important; 
}