User Profile

I'm upset with this strange behavior. It works well in chrome for Android but not in iOSI'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/XoVlLfoHere 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; } }