Фоновый фильтр для страницы навигации тоже медленный

Question

Эй, ребята, я хочу установить фоновый фильтр в Мою навигацию. Я использую простую кнопку переключения, которая приносит со стороны мой 100vh / 100vw div с моей навигацией. Но когда я даю Navigation Div «фоновый фильтр: размытие (10px);» Раскрытие навигации становится медленным. Вот мой код:

jQuery(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    jQuery('html, body').animate({
        scrollTop: jQuery(jQuery.attr(this, 'href')).offset().top
    }, 800);
});




function myFunction(x) {
    x.classList.toggle("change");
}



   
function myFunction2() {
	if (jQuery(window).width() <= 4000) {
    var x = document.getElementById("brat");
    if (x.style.marginLeft === "0%") {
        x.style.marginLeft = "100%";
    } else {
        x.style.marginLeft = "0%";
    }
 }
}

body {
   background-image: url("https://www.tom-archer.com/wp-content/uploads/2018/06/milford-sound-night-fine-art-photography-new-zealand.jpg");
   background-size:cover;
}

* {
  box-sizing: border-box;
}

a {
     
}

.navigat {
    position:fixed;
    top:0px;
    left:0px;
    height:65px;
}

.container1 {
    display:none;
  	
	position:absolute;
	top:30px;
	right:50px;
    
}

.navvvv {
    position:fixed;
    top:0px;
    left:0px;
    height:65px;
}



.bar1 {
    width: 30px;
    height: 1.5px;
    background-color:#515151;
    margin: 6px 0;
    transition: 0.4s;
    
}

.bar2  {
    width: 20px;
    height: 1.5px;
    background-color:#515151;
    margin: 6px 0px 6px 9px;
    transition: 0.4s;
}	

 .bar3 {
    width: 30px;
    height: 1.5px;
    background-color:#515151;
    margin: 6px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 3px) ;
	background-color:white;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-7px, -2.7px) ;
	background-color:white;
}

.container1 {display:block;
	z-index:9999;}
	
#ull {
    margin-top:14%;
    list-style:none;
   
}

#brat a:visited {
    color: #515151;
}

#brat {
	margin-left:100%;
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	background-color:rgba(50,50,50,0.5);
  backdrop-filter: blur(10px);
	text-align: center;
  transition: ease-in-out .4s;
    list-style:none;
    outline:none;
}

.menua:hover {
    color:white !important;
}


.menua {
	width:100%;
	text-align:center;
	text-decoration:none;
	color:white;
	font-family:raleway;
	font-weight:200;
	margin-top:50px;
	font-size:7vh;
	outline:none !important;
    
}


.menua:hover {
	font-weight:900;
    
}

.menub {
padding-top:25px;
padding-bottom:25px;

}

#grraaa {
    padding-bottom:500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1" onclick="myFunction(this); myFunction2();">
				  <div class="bar1"></div>
				  <div class="bar2"></div>
				  <div class="bar3"></div>
				</div>
				
<div class="navigat">
  <div id="brat">
	  <ul id="ull">		
      	<li class="menub" ><a href="https://influencevibes.com/services/" id="topp" class="menua" >Home</a></li>
    	  <li class="menub"><a href="https://influencevibes.com/founder/"  class="menua" >About Me</a></li>
    	  <li class="menub"><a href="https://influencevibes.com/about/"  class="menua">Contact</a></li>
      </ul>
	  </div>
    </div>