How can I get the iOS Safari address bar to minimize on scroll with a flexbox sticky footer in a container?

I have a typical flexbox sticky footer solution that looks something like this:

  <body>
    <div class="wrapper">
      <div class="header">Page Header</div>
      <div class="body">
        <div class="body1">Page Body 1</div>
        <div class="body2">Page Body 2</div>
        <div class="body3">Page Body 3</div>
        <div class="body4">Page Body 4</div>
        <div class="body5">Page Body 5</div>
      </div>
      <div class="footer">Page Sticky Footer</div>
    </div>
  </body>

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.body {
  flex-grow: 1;
}

On iOS Safari, I would expect to see the address bar minimized as you scroll, but instead, the address bar just stays put. I know I can get things working if I allow scrolling on the root html element instead, but I'm wondering if there's anything I can do to preserve the iOS address bar minimizing behavior while also keeping the scrolling in my wrapper container within the body.

Sandbox here: https://codesandbox.io/s/condescending-pascal-r4ntne?file=/styles.css

You can visit: https://r4ntne.csb.app/

to experience this yourself on an iOS device.

body { scroll-padding-top: constant(safe-area-inset-top); /* for iOS devices */ scroll-padding-top: env(safe-area-inset-top); /* for modern browsers */ } .wrapper { scroll-padding-top: constant(safe-area-inset-top); scroll-padding-top: env(safe-area-inset-top); } .body { height: calc(100% - env(safe-area-inset-top)); /* for modern browsers */ height: calc(100% - constant(safe-area-inset-top)); /* for iOS devices */ overflow-y: scroll; }

Recommended topics

Hot tags