Background image resizing when the mobile browser's address bar is toggled

Question

I have a cover with a background image:

<div id="cover"></div>

CSS:

#cover {
  height: calc(60vh - 50px);
  height: calc(var(--cover-height, 60vh) - 50px);
  background: url("");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

There is a problem on mobile browsers when the address bar is hidden or shown. The background images resizes, I suppose because of the cover size trying to fill in the added/removed space but it creates a really awkward jump effect.

I have tried this and this. Neither worked. The background image still jumps. I'm testing this on Android Google Chrome.

I tried my own solution, which didn't work neither:

let vh = window.innerHeight * 0.6;
document.documentElement.style.setProperty('--cover-height', `${vh}px`);

The idea is to calculate the initial height in pixels and set the cover's height to that fixed value so it doesn't change again, that way the background image wouldn't get resized. Well, for some reason I cannot figure out it just doesn't work. The jump effect remains.