Address bar / URL bar not shrinking in mobile safari on scrolling

Question

I am building a website using React (16.8.6) but it does not collapse/shrink the url bar in mobile safari as the user starts scrolling unlike on other websites

The CSS for the wrapper divs looks as follows:

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

const ContentContainer = styled.div`
  height: 100%; /*allows both columns to span the full 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 as follows:

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; /*makes the body non-scrollable*/
  box-sizing: border-box;
}

I am trying to figure out what's wrong in this CSS which is preventing safari url bar to collapse as the user scrolls. Any help will be highly appreciated

Answer 1

To collapse/shrink the url bar in mobile safari, you have to have your body to overflow the viewport, which is not the case here: you have body non-scrollable, and your ContentContainer is whole in the viewport.

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