Flexbox vertical centering/mobile browser issues

Question

Context: I have a container using display: flex and I am centering one svg element vertically in the center of the page. The only other things on the page are A) a fixed header that gets taken out of the document flow and isn't taking up space and B) a footer with position: absolute that should also not be taking up space. The centering works correctly on every browser but mobile chrome/mobile ios. Vertical centering appearing correctly on firefox mobile.

Problem: The child element of the flex container is not being centered on IOS Safari and Chrome Mobile. It seems like the address bar is throwing off the alignment for some reason. Can anyone offer any insight or help me with a way to debug the issue? I cannot replicate the problem in chrome dev tools.

Any help appreciated. Thank you community.

.logo-flexcontainer {
  align-items: center;
  display: flex;
  height: 100vh;
  margin: 0 auto;
  width: 90%;
  @media (min-width: 1024px) {
    width: 50%;
  }
}

.logo-flexcontainer > div {
  flex: 1 0 auto;
}

#mobile-navbar {
  display: flex;
  align-items: center;
  position: fixed; /* Set the navbar to fixed position */
  width: 100%; /* Full width */
  height: 50px;
  top: 0; /* Position the navbar at the top of the page */
  transition: transform .1s ease, background-color .5s ease;
  &.hidden {
    transform: translate3d(0,-100%,0);
  }
  &.scroll-background {
    background-color: rgba(0, 0, 0, 0.8)
  }
  @media (min-width: 1024px) {
    display: none;
  }
  #page-title {
    margin: 5px 0 0 5%;
    h3 {
      font-size: 6vw;
      text-shadow: 1px 1px #000;
      @media (min-width: 600px) {
        font-size: 2rem;
      }
      a {
        text-decoration: none;
      }
    }
  }
  #hamburger {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5px;
    right: 10px;
    cursor: pointer;
    span {
      display: block;
      position: absolute;
      height: 6px;
      width: 100%;
      background: #FFFFFF;
      box-shadow: 1px 1px #000;
      &:nth-child(1) {
        top: 6px;
      }
      &:nth-child(2) {
        top: 18px;
      }
      &:nth-child(3) {
        top: 30px;
      }
    }
  }
}

footer {
  position: absolute;
  text-align: center;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  svg {
   height: 90%;
    @media (max-width: 550px) {
    height: 80%;
    }
  }
}

<div class="logo-flexcontainer">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <g>svg code goes here...</g>
    </svg>
  </div>
</div>
<footer>
  social icons here, code not important
</footer>

Here is a live link to the project here: project link See if you can replicate the problem on your Android or iPhone device.

Two pictures of homepage on chrome mobile and firefox mobile.

The left is the incorrect orientation and the right is the expected result.

It looks like the fixed header is not being removed from the document flow in mobile Webkit browsers. — Michael Benjamin, Dec 14 '17 at 20:56
What if you change from `height: 100vh` to percent, `height: 100%`, and then also add `height: 100%` to all its parents, e.g. `html, body { height: 100%; }` — Asons, Dec 14 '17 at 21:24
@Michael_B: you might be thinking in the right direction. My first gut instinct was that the address bar was being added to the document flow. Let me try the solution proposed by LGSon — Joel Hoelting, Dec 14 '17 at 23:54
You might be working with browsers that haven't been fully updated. But that's just a theory. See my answer here: https://stackoverflow.com/q/32991051/3597276 — Michael Benjamin, Dec 15 '17 at 00:09
@Michael_B Tested this on the most up-to-date versions of Chrome and Safari (mobile versions) — Joel Hoelting, Dec 15 '17 at 01:11

score 3 · Accepted Answer · answered Dec 15 '17 at 02:46

I've been reading a lot and I now realize this is a well documented issue. My initial instinct was correct, chrome mobile address bar adds 60px to the document flow. When you create an element with 100vh, it actually extends 60px past the bottom of the screen of the phone. To me it appears to be a bug but the chrome dev team considers it a feature. Calculating Viewport Height on Chrome Android with CSS

Here is Google's official statement on this: https://developers.google.com/web/updates/2016/12/url-bar-resizing

My apologies for posting this question in lieu of this new information.

Flexbox vertical centering/mobile browser issues

1 Answers1