Fixed Overlay 100vh Scrolling Glitch

Question

When I make an overlay that cover the entire screen 100vh/svh/dvh/ it glitches for a small second when I start scrolling on iphone because the safari navigation bar gets smaller.

When I start scrolling, the overlay size doesn't update instantly, so I can kinda see through the overlay which makes the user experience bad.

Is there a way to fix this?

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
    z-index: 100;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-div {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: 90%;
}

<div class="overlay"></div>
<main>
  <section class="main">
    <div class="text-div">
      <p>Text</p>
    </div>
    <div class="text-div">
      <p>Text</p>
    </div>
    <div class="text-div">
      <p>Text</p>
    </div>
  </section>
</main>