Why Can't I scroll over the bootstrap 4 navbar?

I'm upset with this strange behavior. It works well in chrome for Android but not in iOS

I've been designing a website but I haven't been able to achieve the navbar scrolls on iOS? It works well on android and the device simulator of Chrome but on iOS it scrolls over the underlying content.

I set a fixed heigh for the .navbar-collapse class when is shown to the user. I also set an inherit height and "overflow: auto" for its children: the navbar-nav class.

Here is a video https://imgur.com/a/XoVlLfo

Here is the HTML code

<div id="menuContainer" class="container-fluid fixed-top">
  <ul id="menuContacto" class="nav justify-content-end">
  <li class="nav-item datoMenuContacto">
  ...
  </li>
  <li class="nav-item datoMenuContacto">
  <a class="nav-link" href="mailto:x@x.com">
  <i class="iconoSuperior fas fa-envelope-square"></i>x@x.com
  </a>
  </li>
  <li class="nav-item datoMenuContacto">
  ...
  </li>
  <li class="nav-item datoMenuContacto">
  ...
  </li>

  </ul>
  <nav id="menuPrincipal" class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="/index.html"><img id="logo" src="/img/logo.png" alt="logo"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navegacionPrincipal" aria-expanded="true"><i class="fas fa-bars"></i></button>
  <div id="navegacionPrincipal" class="navbar-collapse collapse show" style="">
  <ul class="navbar-nav">
  <li class="nav-item active"><a href="/index.html" class="nav-link">Inicio</a></li>
  <li class="nav-item"><a href="/nosotros.html" class="nav-link">Nosotros</a></li>
  <li class="nav-item"><a href="/tecnologia.html" class="nav-link">Tecnología</a></li>
  <li class="nav-item dropdown"><a id="dropdownUsoProductos" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Utilización de productos</a>
  <ul id="submenuPrincipal" class="dropdown-menu">
  <li class="dropdown-item"><a class="nav-link" href="/residencial.html">Residencial</a></li>
  <li class="dropdown-item dropdown-item-expand"><a id="dropDComercial" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Comercial</a>
  <div class="dropdown-menu">
  <a class="dropdown-item" href="/restaurantes.html">Restaurantes</a>
  <a class="dropdown-item" href="/c_comerciales.html">Centros comerciales</a>
  <a class="dropdown-item" href="/hoteles.html">Hoteles</a>
  <a class="dropdown-item" href="/supermercados.html">Supermercados</a>
  </div>
  </li>
  <li class="dropdown-item dropdown-item-expand"><a id="dropDIndustrial" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Industrial</a>
  <div class="dropdown-menu">
  <a class="dropdown-item" href="/tabaco.html">Tabaco</a>
  <a class="dropdown-item" href="/industria.html">Industria</a>
  <a class="dropdown-item" href="/preenfriamiento.html">Preenfriamiento</a>
  <a class="dropdown-item" href="/ron_y_vino.html">Ron y vino</a>
  <a class="dropdown-item" href="/cuartos_frios.html">Cuartos fríos</a>
  <a class="dropdown-item" href="/textil.html">Textil</a>
  <a class="dropdown-item" href="/papel_e_imprenta.html">Papel e imprenta</a>
  <a class="dropdown-item" href="/madera.html">Madera</a>
  <a class="dropdown-item" href="/plantas_tratamiento.html">Plantas de tratamiento</a>
  </div>
  </li>
  <li class="dropdown-item"><a class="nav-link" href="/agricola.html">Agrícola</a></li>
  <li class="dropdown-item dropdown-item-expand">
  <a id="dropDPecuario" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pecuario</a>
  <ul class="dropdown-menu">
  <li class="dropdown-item"><a href="/avicola.html" class="nav-link">Avícola</a></li>
  <li class="dropdown-item"><a class="nav-link" href="/bovino.html">Bovino</a></li>
  <li class="dropdown-item"><a class="nav-link" href="/porcino.html">Porcino</a></li>
  <li class="dropdown-item"><a class="nav-link" href="/equino.html">Caballería</a></li>
  </ul>
  </li>
  <li class="dropdown-item"><a class="nav-link" href="/entretenimiento.html">Entretenimiento</a></li>
  </ul>
  </li>
  <li class="nav-item dropdown"><a id="dropDProductos" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Productos</a>
  <div class="dropdown-menu">
  <a class="dropdown-item" href="bombas_nebulizacion.html">Bombas para nebulización</a>
  <a class="dropdown-item" href="ventiladores_portatiles.html">Ventiladores portátiles</a>
  <a class="dropdown-item" href="ventiladores_pared.html">Ventiladores de pared</a>
  <a class="dropdown-item" href="sistemas_esp_niebla.html">Sistemas especiales para niebla</a>
  <a class="dropdown-item" href="canones_niebla.html">Cañones de niebla</a>
  </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="/portafolio.html">Portafolio</a></li>
  <li class="nav-item"><a class="nav-link" href="/contacto.html">Contáctenos</a></li>
  <li class="nav-item"><a class="nav-link" href="/login.html">Login</a></li>
  
  </ul>
  </div>
  </nav>
</div>

And here is the CSS

@media (max-width: 991px) and (max-resolution: 4dppx){
    #menuPrincipal, #navegacionPrincipal.show, .navbar-nav{
        z-index: 100;
    }   
}


@media (max-width: 991px) and (max-resolution: 4dppx){
    #navegacionPrincipal.show{
        z-index: 100;
        display: flex;
        flex-flow: column wrap;
        align-items: stretch;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
}


@media (max-height:850px) and (max-width: 800px) and (max-resolution: 4dppx) and (orientation: portrait) {
  #navegacionPrincipal.show {
    height: 65vh;
  }
}


@media (max-height:850px) and (max-width: 800px) and (max-resolution: 4dppx) and (orientation: portrait) {
  .dropdown-menu.show a {
    white-space: pre-wrap;
  }
}

/*for iPhone*/
@media (max-width: 991px) and (max-resolution: 4dppx){
  #navegacionPrincipal.show .navbar-nav {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 65vh !important;
    max-height: 65vh!important;
  }
}