Scrolling Issue on Position Fixed Element on Ios

iOS safari: scrolling is broken inside position: fixed; elements

Adding overflow: hidden; to <html> or <body> seems to fix it.

I'm not sure why this works, but I assume the problem is that safari is trying to scroll html/body instead of the element you want.

Because the scrollable section is inside a position:fixed element, scrolling the body has no visual effect, so it looks like nothing is happening.

position: fixed doesn't work on iPad and iPhone

I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.

The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.

iOS Mobile Browser scrolling issue with position:fixed, Page jumps back to top when scroll ends

the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.

Overflow scrolling not working on position fixed element iOS

Alright, I was able to resolve the issue (which is kind of a weird one). For some reason, having the nav fixed to the very bottom seemed to be the issue. To fix this, I added additional space using the bottom property and added a pseudo-element to fill in the gap. Then, increased the height of the link elements inside the scroll container. Here's the updated code:

.sticky-nav {  position: fixed;  width: 100%;  padding-top: 10px;  bottom: 10px;  left: 0;  z-index: 90;  background-color: #ddd;  border-top: 1px solid #f8f8f8;}
.sticky-nav:after {  content: "";  position: absolute;  width: 100%;  height: 10px;  bottom: -10px;  left: 0;  background-color: #ddd;}
.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;  height: 100%;  padding-right: 25px;  margin: 0;}
.sticky-nav-menu li {  display: inline-block;  white-space: nowrap;  height: 100%;}
.sticky-nav-menu li a {  display: inline-block;  height: 100%;  padding-top: 20px;  padding-right: 25px;}
.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>

Scrolling Issue on Position Fixed Element on Ios

iOS safari: scrolling is broken inside position: fixed; elements

position: fixed doesn't work on iPad and iPhone

iOS Mobile Browser scrolling issue with position:fixed, Page jumps back to top when scroll ends

Overflow scrolling not working on position fixed element iOS

Related Topics

Leave a reply