Адаптивное переполнение подменю при выпуске CSS для iPhone

Question

Я пытаюсь создать отзывчивое навигационное меню на сайте WordPress.Я разработал навигацию, используя flex-box, и навигация имеет подменю.Моя проблема, когда я пытаюсь открыть подменю, высота li подменю изменяется, чтобы содержать подменю в инструментах Chrome Dev и на Android Mobile.Но на мобильных телефонах Iphone высота li остается неизменной, что делает переход подменю на следующую страницу.

• Я пытался изменить высоту со 100% до 100vh.
• Я пытался написать свой собственный JS вместо jQuery, но также это не сработало, поэтому я вернулся к jQuery,

Мой HTML генерируется с использованием WordPress

<div id="vot-nav-sidebar" class="">
    <?php 
        wp_nav_menu( array(

            'theme_location' => 'headerMenu',
            'menu_class' => 'main_menu_ul_mobile list-group',
            'container' => '',
        ) );
        ?>
</div> 

CSS-код для связанных частей:

#vot-nav-sidebar .main_menu_ul_mobile {
  position:relative;
  padding:0;
  margin:0;
  top:0;
  left:0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#vot-nav-sidebar .main_menu_ul_mobile > li {
  width: 100%;
  height: 100vh;
  position:relative;
  display: flex;
  flex-wrap: wrap;
}


#vot-nav-sidebar .main_menu_ul_mobile li a {
  width: 100%;
  position:relative;
  display: block;
}

#vot-nav-sidebar .main_menu_ul_mobile li.has-sub .sub-menu {
  margin-left: 1rem;
  width: 100%;
  position:relative;
  display: none;
}

Я использую мой JS-код внутри класса

constructor() {
    this.toggle_subMenu(this);
}


toggle_subMenu (that){
    var mainHasSub = $('#vot-nav-sidebar .main_menu_ul_mobile .has-sub');
    var mainHasSubAnchor = $('#vot-nav-sidebar .main_menu_ul_mobile .has-sub > 
    a');

    mainHasSub.click(function(){
      if ($(this).children('.has-sub > .sub-menu').css('display') === 'none') 
      {
        that.showSubmenu(this);
        return;
      }

      if ($(this).children('.has-sub > .sub-menu').css('display') === 'block') 
      {
        that.hideSubmenu(this);
        return;
      }

    });
}

showSubmenu(that){
  $(that).children('.has-sub > .sub-menu').slideDown('slow');
  var subHeight = $(that).children('.has-sub > .sub-menu').height();
  $(that).addClass('open');
}

hideSubmenu(that){
  $(that).children('.has-sub > .sub-menu').slideUp('slow');
  $(that).removeClass('open');
}

Я полагаю, это некоторые проблемы с совместимостью CSS, так как меню работает на ПК и Android.