bootstrap 4 navbar dropdown not working on IOS devices / safari

Question

I just uploaded a new bootstrap-site a couple of days ago. Since then I had reported, that the navbar does not work on IOS devices. The problem does not occur on any other device or browser, just Safari.

When clicking/touching the hamburger symbol, the dropdown does open properly, but when clicking the submenu-dropdown the whole navbar collapses without showing the submenu. So therefore the submenu is not accessible at all - which basically makes the whole site inaccessible on IOS.

Does anyone know a solution? Thanks

here is my code:

<div class="container-fluid pb-2">
  <nav class="navbar navbar-expand-md navbar-dark bg-alert fixed-top">
    <a class="navbar-brand pr-4" href="../index.html">Naturpark Weissensee</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
      <ul class="navbar-nav">
        <li class="nav-item active dropdown">
          <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Unterkunft buchen
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdown1">
            <a class="dropdown-item" href="Hotels.html">Hotels</a>
            <a class="dropdown-item" href="Pensionen.html">Pensionen</a>
            <a class="dropdown-item" href="Camping.html">Camping</a>
            <a class="dropdown-item" href="Ferienwohnungen.html">Ferienwohnungen</a>
            <a class="dropdown-item" href="Weissensee%20Umgebung.html">Weissensee Umgebung</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Sommer
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdown2">
            <a class="dropdown-item" href="Wasser.html">... am See</a>
            <a class="dropdown-item" href="Dorf.html">... im Dorf</a>
            <a class="dropdown-item" href="Wald.html">... im Wald</a>
            <a class="dropdown-item" href="Schifffahrt.html">Schiffrundfahrt</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Winter
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdown3">
            <a class="dropdown-item" href="Schnee.html">... im Schnee</a>
            <a class="dropdown-item" href="Eissport.html">... am Eis</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Information
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdown4">
            <a class="dropdown-item" href="Wissenswertes.html">Wissenswertes</a>
            <a class="dropdown-item" href="Anlaufstellen.html">Anlaufstellen</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 1

Holy crap I found the problem it is sheer madness. The dropdown menus need an href=# (like...literally a # in my code, not an actual address). So for instance:

<a href="#" class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Unterkunft buchen
</a>

This is one of the most insidious bugs I've ever had to track down! I found the answer at stack overflow: Bootstrap 3 Dropdown on iPad not working