Address bar/URL bar remains unchanged when scrolling on mobile Safari

Question

I'm building a website using React (16.8.6), but on mobile Safari, when the user starts scrolling, it doesn't collapse/shrink the URL bar like other websites do.

The CSS for the wrapping div looks like this:

<ContentContainer>
    <ScrollContainer>
        {...otherComponentsHere}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  height: 100%; /*Allow two columns to occupy the entire height of the browser window*/
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
`;
const ScrollContainer = styled.div`
  flex: 1;
`;

App.css looks like this:

html {
  height: 100%;
  min-height: 100vh;
}

body {
  font-family: 'Work Sans', 'Courier New', sans-serif;
  min-height: 100%;
  height: 100%;
  margin: 0px;
}
#app {
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  overflow: hidden; /*Make the body non-scrollable*/
  box-sizing: border-box;
}

I'm trying to figure out an issue in this CSS that's preventing the Safari URL bar from collapsing as the user scrolls. Thank you for your help.

Answer 1

To collapse/shrink the URL bar in mobile Safari, you have to make your body overflow the viewport, but that's not the case here: your body is not scrollable, and your ContentContainer is located entirely within the viewport.

To test this, create a new page without CSS and put enough content into the body to make the page scrollable.