Bootrap 4折叠不会在IOS Safari上的页面滚动中崩溃/消失

Question

单击指向实际“页面”的菜单链接时，导航栏折叠会折叠/消失，但单击“自定义”菜单链接滚动到同一页面上的不同部分时，导航栏折叠不会消失/消失。

当切换“汉堡包”图标时，导航栏折叠显示为全屏。 JQuery可以解决此问题，但在IOS Safari上仍然无法使用。

这里是我的CSS

 * { cursor: pointer; }   

#site-header{
    height: 85px;
    top: 0;
    z-index: 3000;
    }


.logged-in #site-header{
    top: 32px;
}

#primary {
    margin-top: 85px;
    }

.nav {
    display: block;
}


.navbar {
    height: 75px;
    width: 100%;
    padding: 0;
    background: black;
}


.navbar-nav {
    float: none!important;

    }

.navbar-collapse {
    position: absolute;
    background: black;
    width: 100%;
    padding-right: 30px;
    padding-top: 0px;
    padding-bottom: 35px;
    border: 0px;
    margin-top: 0px;
    height: 110vh;
    left: 0;
    top:0;
    background-size: cover;
    }

.navbar-image {
    position: absolute;
    opacity: .2;
    right: 0px;
    top:0%;
    margin-top: -15px;
    padding-left: 30px;
    padding-right: 30px;
    bottom: 0;
    margin: auto; 
    z-index: 1;


}

.navbar-image:hover, .navbar-image:active {

    -webkit-transition-duration: 5.8s;
    -moz-transition-duration: 5.8s;
    -o-transition-duration: 5.8s;
    transition-duration: 5.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;    
      -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);  
}



.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .01s;
    -moz-transition: height .01s;
    -ms-transition: height .01s;
    -o-transition: height .01s;
    transition: height .01s;
    }

.navbar-collapse ul {
    position: absolute;
        margin-left: 50px;
        margin-top: 80px;
    z-index: 2;
    } 

.navbar-collapse ul li {
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    }
.navbar-collapse ul li a{
    color: white!important;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 300;
    }

HTML在这里

    <header id="site-header" class="container-fluid">
<nav class="navbar fixed-top" role="navigation"> 

    <div class="container-fluid"> 
          <div class="navbar-header">   
                <button type="button" class="navbar-toggler disable" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="icon-bar top-menu"></span>
                    <span class="icon-bar mid-menu"></span>
                    <span class="icon-bar bottom-menu"></span>
                </button>  
          </div> 

          <!-- Collect the nav links, forms, and other content for toggling --> 
          <div class="collapse navbar-collapse navbar-ex1-collapse"> 

              <ul class="nav">
                    <li class="menu-item">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="menu-item">
                        <a class="nav-link" href="#">Somthing Else</a>
                    </li>
                </ul>      

            </div>
    </div>
</nav>

JQUERY

    (function ($) {
  $(document).ready(function () {
  $(".navbar-collapse ul li a").on("click", function () {
    $(".navbar-collapse").collapse("hide");
          });
  });
})(jQuery);