Search code examples
ioscssipadscrollshopify

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

I found a number of issues with the POSITION:FIXED property on iOS Mobile. But it didnt resolved my issue. In desktops and in Android devices, works perfectly. Even in MacBook Air also.

ISSUE:

I have a position:fixed header, and a position:relative content (using padding-top:height-of-header for alignment). When i scroll fast, it starts scroll and then suddenly, it jumps back to the top of the page. But this issue is not showing when we scroll slowly.

This is the code for header

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
}

this is the code for main-content

  .main-content {
    padding-top: 80px;
    position:relative;
  }

Tried with -webkit-overflow-scrolling: touch; , transform: translate3d(0,0,0);.

Its an e-commerce website, developed in SHOPIFY.

Solution

  • 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.