Background gap and jumping when address bar disappears

So I'm trying my hands on some web development for the first time and I'm having a really tough issue. I have a background with lines that extend the entire page height (I use 100vh). Now this works fine on desktop and iOS but the Chrome browser creates a gap when the address bar hides. The div jumps back to regular height but there is a shift when the address bar is hiding.

I've stumbled upon this problem a lot over the web but for some reasons the solutions suggested here for instance aren't working for me.

My html code looks like:

<div class="container-fluid page_background">
 <!-- grid lines -->
 <div class="row bg_row">
  <div class="col-4" style="height:100%;">
    <div class="line" style="opacity:0.5;"></div>
  </div>
  <div class="col-3" style="height:100%;">
    <div class="line" style="opacity:0.4;"></div>
  </div>
  <div class="col-2" style="height:100%;">
    <div class="line" style="opacity:0.3;"></div>
  </div>
  <div class="col-1" style="height:100%;">
    <div class="line" style="opacity:0.2;"></div>
  </div>
  <div class="col-1" style="height:100%;">
    <div class="line" style="opacity:0.1;"></div>
  </div>
</div>

Where page_background is:

.page_background {
  background-color: #263238;
  height: 100%;
  overflow: auto;
  margin: 0;
}

And (the important one) bg_row is:

.row.bg_row {
  position: fixed;
  height: 100vh;
  width: 100%;
  bottom: 0;
  top: 0;
  margin: 0;
}

Now I think the problem is the bg_row because it's position is fixed. I need that however since it had to be a static background. Do I need to adjust the page_background height with javascript? Or just bg_row? I've basically tried every solution in the aforementioned SO question and applied it to bg_row but the problem persists.