Touch targets move when bottom address bar shrinks on Safari mobile

Question

I have a menu overlay that's set to position:fixed and height: 100vw when opened. The content inside of it is scrollable.

If the bottom address bar in Safari is visible at the time the overlay is opened, and then shrinks when scrolling, the touch areas no longer line up where they're supposed to (ie. when tapping a link, a link below where you tap is targeted).

I also have classes added to body and html to prevent scrolling in the background when the overlay is open.

.disable-scroll-body {
    overflow: hidden;
    height:100%;    
}

.disable-scroll-html {
    position: static;
    overflow: hidden;
    height:100vh;
}

I've tried adding min-height: -webkit-fill-available to the overlay, as suggested in some other similar posts.

CSS:

.overlay {
    transform: translate3d(0px, -100%, 0px) scale3d(1, 1, 1);
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: #fff1e8;
    max-width: 100vw;
    display: flex;
    padding: 2em;
    height: 100vh;
    min-height: -webkit-fill-available;
 }