How can I prevent the address bar in Safari iOS from reappearing when a dialog is open similar to the functionality on Airbnb?

I'm trying to prevent the scrolling of the body element in the background when modals or overlays are opened, similar to what's implemented on Airbnb's website. Here's the method I've been using:

Opening a Modal

I add the locked class to either the body or html element:

html {
  min-height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.locked {
  overflow: hidden;
  position: fixed;
  inset: 0 0 0 0;
}

Then, I use scrollTop to update the CSS top value, which keeps the current position in view.

Closing a Modal

Upon closing the modal, I remove the locked class and restore scrollTop.

---

This method has been generally successful, but there is an issue on iOS where the address bar reappears when the view is locked, causing a jarring jump in the content.

Interestingly, Airbnb seems to have overcome this issue without apparent deviation from this method.

What is the solution to prevent the reappearing address bar on mobile browsers, thereby eliminating the content jump?

---

Here is a visual representation of the current state when I open a dialog:

What I aim to achieve is demonstrated below:

from How can I prevent the address bar in Safari iOS from reappearing when a dialog is open, similar to the functionality on Airbnb?