css min-height: 100vh add extra space to bottom of container

I am trying to use min-height: 100vh; on my inner call to action div that sits on top of a background video. Everything works correctly, however, when I try to use 100vh with the absolutely positioned video it seems to add a block of margin to the section.

How do I both use 100vh on the section and not have the extra margin? I have tried calc, but that gets wonky with responsive and mobile devices. Thoughts?

CSS

...
  .video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    .video-background {
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: 100%;;
    }
  }

  .content-wrapper {
    @include media-breakpoint-up(xs) {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      padding: 0;
      margin: 0;
    }
  }
...

.section-call-to-action {
  @include media-breakpoint-up(xs) {
    min-height: 100vh;
    padding: 0;
    margin: 0;

    .row {
      margin: 0;
      padding: 0;
    }
  }
...

HTML

<div class="video-wrapper">
  <video autoplay="" class="video-background" loop="" muted="" playsinline="">
    <source src="..." type="video/mp4">
  </video>
</div>
<main class="container-fluid content-wrapper">
  <section class="container-fluid d-flex flex-column flex-fill justify-content-center section-call-to-action">

  </section>
  <section class="container-fluid d-flex flex-column section-venn-wrapper">

  </section>
  <section class="container-fluid section-robot-friends">

  </section>
</main>

UPDATE

1. I have tried using min-height: calc(100vh - 5rem); and that works in Chrome on a desktop but not Safari on iO... hmmm...
2. I have come across this library https://github.com/Hiswe/vh-check but I am trying to address this with only css
3. I tried to utilize iOS css but that is not working on iPads

  @supports (-webkit-overflow-scrolling: touch) {
    min-height: calc(100vh - 200px);
  }