I'm working on a fly-out menu on mobile and have run into a weird experience related to the viewport height. The menu is positioned off-screen using the following CSS class:

.modal-filter-list {
  background-color: #fff;
  border: none;
  display: none;
  height: 100dvh;
  left: -100vw;
  max-height: 100lvh;
  max-width: 80vw;
  min-height: 100svh;
  position: fixed;
  top: 0;
  width: 80vw;
  z-index: 1200;
}

I'm using a height of 100dvh so the menu will adjust to the viewport height if the browser toolbar hides after swiping down the page. When the button is tapped to open the menu the is-open class is applied to display it:

@media (max-width: 769px) {
    .modal-filter-list.is-open {
        overflow: hidden;
        position: fixed;
    }
}

.modal-filter-list.is-open {
    display: block;
    left: 0;
}

In this screenshot you see the menu at full height because Safari's toolbar is hidden (after I began swiping down to the Filter button).

But if I tap in the area of the two call to action buttons at the bottom of the menu, the browser toolbar returns, which shrinks the menu again:

Here's a demo of the menu with code.

I can't figure out if this a bug in the browser or my code. I suspect the latter since I see other menus on mobile that don't have this strange experience and could use some fresh eyes and perspective.