Overflow-scrolling funktioniert nicht auf position fester Bestandteil des iOS

Habe ich position: fixed Navigationsleiste ganz unten auf der Seite auf mobilen Geräten /Größen. Die nav-bar selbst hat eine overflow-container der Benutzer kann einen Bildlauf nach rechts durch, um weitere links (dies ist eine design-Anfrage und meiner Meinung nach eine schlechte user experience, aber das ist meine 2 Cent).

Das Problem, das ich gesehen habe beim testen auf iOS-Geräten ist, dass das scrollen /jeden link klicken ist nicht verfügbar, wenn die oben /unten-native browser-Elemente nicht auf dem Bildschirm. In anderen Worten, wenn die Elemente " auto-ausblenden der festen Verhalten überhaupt nicht funktioniert. Ich habe eine Geige unter und beinhaltete auch einen Ausschnitt aus dem dazugehörigen code unter, dass, im Fall es irgendwelche Probleme anzeigen, die Geige auf iOS richtig:

Fiddle zeigt das Verhalten in Frage

CSS:

.sticky-nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 90;
  background-color: #ddd;
  border-top: 1px solid #f8f8f8;
  overflow: hidden;
}

.sticky-nav-inner {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 57px;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 0;
}

.sticky-nav-menu {
  display: inline-block;
  white-space: nowrap;
  padding-right: 25px;
  margin: 0;
}

.sticky-nav-menu li {
  display: inline-block;
  white-space: nowrap;
  margin-right: 25px;
  padding-top: 20px;
}

.sticky-nav-overflow {
  width: calc(100% - 100px);
  height: 100%;
  margin-right: 2%;
  overflow-x: scroll;
}

.sticky-nav-mobile {
  padding-left: 1%;
  z-index: 1;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pane-container">
      <nav class="sticky-nav js-sticky-nav clearfix">
        <div class="sticky-nav-inner">
          <div class="sticky-nav-overflow">
            <ul role="tablist" class="sticky-nav-menu is-centered-text">
              <li role="presentation" class="active"><a href="#linkone" aria-controls="linkone" role="tab" data-toggle="tab" class="sticky-nav-link">LINK ONE</a></li>
              <li role="presentation"><a href="#linktwo" aria-controls="linktwo" role="tab" data-toggle="tab" class="sticky-nav-link">LINK TWO</a></li>
              <li role="presentation"><a href="#linkthree" aria-controls="linkthree" role="tab" data-toggle="tab" class="sticky-nav-link">LINK THREE</a></li>
              <li role="presentation" class="sticky-nav-animated-list"><a href="#linkfour" aria-controls="linkfour" role="tab" data-toggle="tab" class="sticky-nav-link">LINK FOUR</a></li>
            </ul>
          </div>
          <div class="sticky-nav-mobile">
            <a href="#" class="sticky-nav-cta call-button">BUY NOW</a>
          </div>
        </div>
      </nav>
      <div class="tab-content">
        <div id="linkone" role="tabpanel" class="grid-container grid-parent linkone-pane is-centered-text tab-pane fade in active">
          <h1>Link one pane</h1>
        </div>
        <div id="linktwo" role="tab-panel" class="grid-container grid-parent linktwo-pane is-centered-text tab-pane fade">
          <h1>Link two pane</h1>
        </div>
        <div id="linkthree" role="tab-panel" class="grid-container grid-parent linkthree-pane is-centered-text tab-pane fade">
          <h1>Link three pane</h1>
        </div>
        <div id="linkfour" role="tab-panel" class="grid-container grid-parent linkfour-pane is-centered-text tab-pane fade">
          <h1>Link four pane</h1>
        </div>
      </div>
    </div>

Habe ich versucht, einige alternative Methoden, wie -webkit-overflow-scrolling mit kein Glück. Ich habe das Gefühl, das Problem hängt nicht. Scheint noch nicht registrieren, dass der Bereich des Bildschirms, ohne dass Sie getrieben durch die native unteren Leiste auf iOS.

Jede und alle Hilfe wird sehr geschätzt. Nur running out of Ideen, um zu versuchen, auf meine eigene. Ich bin der Hoffnung, dies zu erreichen mit einem minimum von JavaScript, aber ich bin überhaupt nicht dagegen. Vielen Dank für Ihre Hilfe!