Fixed background twitches when scroll is hidden?

Question

css

There is a position: fixed background on a div with position: relative
Why does it twitch and how to prevent it. The scroll is written in js, everything calculates well.
How can you get around this moment?
Can anyone come across? I will be very grateful

Answer 1

Usually the background is set to position: absolute;

.background {
  position: absolute;
  top:0; left:0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  img {
    width: 100vw;
    height: 100vh;
   }
}

<div class="background"> 
  <img src="https://avtovesti.com/wp-content/uploads/2016/06/ferrari-488-gtb-tuning-novitec-rosso-9.jpg" alt="">
</div>
<button>sdfsdfsdf</button>