title: PWA IOS: Child of body not taking 100% height, gap on bottom
body: <p>I am trying to make a web app, using angular to make a standalone PWA on IOS, while using the <code>viewport-fit = cover</code> meta tag. My CSS looks like this:</p>
  <pre><code>body {
    width: 100%;
    height: 100vh;
    background: blue;
  }
  .test{
    background: red;
    height: 100%;
    width: 100%;
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ltttv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ltttv.png" alt="enter image description here" /></a></p>
  <p>As you can see ideally the entire screen should be red, but no matter what I do it there is always a gap on the bottom. I even tried adding padding to test div, but the gap doesn't go away. Do not this issue only comes up after install the web app using &quot;Add to homescreen&quot; on safari.</p>