On mobile devices / sizes, I have a navigation bar with position: fixed at the bottom of a page. The nav bar includes an overflow container for scrolling right to see more links (although I personally believe this design choice leads to poor user experience).
The problem arises when testing on iOS devices - if the top/bottom native browser elements are not on screen and auto-hide, the fixed behavior stops working. To demonstrate the issue, I've provided a link to the fiddle below along with relevant code snippets:
Check out the behavior in question on this Fiddle
.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;
}<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>Despite trying alternatives like -webkit-overflow-scrolling, the issue persists. It seems that the issue lies in how iOS treats the area outside the view without its native bottom bar pushing up.
Your help in resolving this matter would be greatly appreciated. I've exhausted my options and am open to using JavaScript solutions. Thank you for any assistance you can provide!