Fix scrolling bug on iOS Safari with fixed elements and bottom bar

ios-fixed-scrolling-fix.css

/* Fix scrolling bug on iOS Safari with fixed elements and bottom bar */

body.noscroll {
  height: 100%;
  overflow: hidden; /* make sure iOS does not try to scroll the body first */
}

/* your wrapper, most likely mobile menu */
.fixed-wrapper {
  width: 100%;
  position: fixed;
  top: 0px; /* adding px unit also seems to be important for whatever reason, albeit I think we all concur that this should be unitless */
  left: 0px;
  bottom: 0px;
  height: 100vh;
  overflow: scroll; /* not auto! */

  /* magic mobile viewport iOS bug fix */
  /* also see: https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/ */
  /* also see: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/ */
  height: -webkit-fill-available;
  -webkit-overflow-scrolling: touch;
}

/* your actual content, which is higher than the outer element */
.fixed-wrapper .fixed-content {
  min-height: 100vh; /* this is the magic, actually bug abusing iOS here */
}

If you are still experiencing this issue and the above hasn't helped check if you have a "position: relative" on the body or html tag and remove it. This was the issue scrolling was broken on safari mobile for me.

@zigavidmar yes! it's happening to me as well. And apparently it gets worse with multiple relative parents or horizontal scrolling.

I tried with an empty page and it was fine ( not feeling native.. ) , once you add more depth it gets worse. And the elastic control that allows you to move to another tabs etc makes a lot of conflicts.

BTW: little bit of topic but related. Framer motion has same problem with child animations that mix px and % or relative units. Animations doesn't work , but they work fine after the dragStart event it's triggered. The webkit renders properly.

I forgot. There is another actor in the issue. The touch algo. That analyze and predicts your intent. A huge scroll area usually works fine...