How to beat page height increase on mobile devices?

Question

css

Good afternoon.
I've had this problem many times on mobile devices. Most browsers hide the address bar when scrolling down the page, which increases the height of the page.
And if the page body height=100vh then there are various kinds of problems.
For example, the layers "nailed" to the bottom border when loading are partially hidden, and only if you scroll down (= hide the address bar), they become fully visible.
Or the reverse case. The background set by body, even with background-size=cover, when the address bar is hidden, a white bar with no background appears, with a height equal to the size of the address bar.
The only way we have guaranteed to fix this so far is to prohibit touchmove on the page. Which in my opinion is not too kosher.
Am I living wrong? and humanity has long figured out how to deal with it? Or are all the creators of pages without scrolling for mobile devices obliged to suffer with touchmove?

Answer 1

for android there are options in manifest.json, for ios I can't tell.

Answer 2

As a solution, set the page container to:

.wrapper {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
}

Thus, the content of the container will scroll, not the body. However, the address bar is not hidden.