Баг с градиентом

[leekyrave]

Хай,есть сайт - tools.mint-plantation.ru и в нем можно увидеть баг,когда пролистываешь вниз - градиент багается
Сам код:

<div id="wrap">
<div id="main">
 
  <span style="font-size:30px;cursor:pointer" onclick="clicknav()">☰</span>
  <h2>Mint Tools</h2>
  <p>зачем...</p>
 
</div>



<div class="footer"><a class = "text">
  <h2>Mint Plantation © 2021</h2>

<h3>Все права защищены.Любое копирование материала запрещено!</h3>
<h3>Любое копирование материала запрещено!</h3>
</div>

body {

    background-image: linear-gradient(135deg,#EAD6EE, #A0F1EA);
    font-family: "Lato", sans-serif;
    display: flex;
    flex-direction: column;
    height: -webkit-fill-available;
}


html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}





#main {
    transition: margin-left .5s;
    padding-bottom: 150px;
}





 

#particles-js{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -50;
  }
 



 
  #footer {
    position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;

}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.footer .text {


    position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-family: "Lato", sans-serif;
}

Как починить?

 

[MrTNTminer]

Как я понял речь идет об этом:

Спойлер: Скрины

В обычном виде:

Если немного непонятно, увеличил:

Чтобы весь background-image двигался за пользователем (двигался вниз, так сказать ;d), нужно добавить к элементу body background-attachment: fixed;. Это означает что весь background-image не будет менять своего местоположения, отрывок с специализированного сайта (link):

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Надеюсь поможет, возможно я сказал что-то не правильно, другие могут поправить меня.