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 */
}

Isn't https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ a fix?

Hi from 2023!

@steida Yes, using lvw, lvh is the fix at the moment

HOWEVER there is another bug:

• when pinned on iPhone (PWA / "pin to home screen")
• when requesting fullscreen (meta viewport-fit=cover, webmanifest "display": "fullscreen")

body's position must NOT be "fixed", or it strangely crops to the small viewport! (seen 2023/11 iOs 16.6.1 iPhone 14) (strangely it works with position: absolute but that's not the same)

The solution is

• ensure root element (:root, html) has no padding, no margin, no border
• ensure body has height 100 lvh

/* apply a natural box layout model to all elements
 * https://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
:root                  { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

:root, body {
  margin: 0;
  padding: 0;
  border: initial;
}

body {
  overflow: hidden;
  width: 100lvw;
  height: 100lvh;
}

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