title: Backdrop-filter for Navigation page too Slow
body: <p>Hey guys I want to put backdrop-filter to My Navigation. I am using simple toggle Button witch brings from the side my 100vh / 100vw div with my navigation. But when I give to the Navigation Div the "backdrop-filter: blur(10px);" the reveal of the Navigation becomes laggy. Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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() &lt;= 4000) {
      var x = document.getElementById("brat");
      if (x.style.marginLeft === "0%") {
          x.style.marginLeft = "100%";
      } else {
          x.style.marginLeft = "0%";
      }
   }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container1" onclick="myFunction(this); myFunction2();"&gt;
        &lt;div class="bar1"&gt;&lt;/div&gt;
        &lt;div class="bar2"&gt;&lt;/div&gt;
        &lt;div class="bar3"&gt;&lt;/div&gt;
      &lt;/div&gt;
      
  &lt;div class="navigat"&gt;
    &lt;div id="brat"&gt;
     &lt;ul id="ull"&gt;  
         &lt;li class="menub" &gt;&lt;a href="https://influencevibes.com/services/" id="topp" class="menua" &gt;Home&lt;/a&gt;&lt;/li&gt;
         &lt;li class="menub"&gt;&lt;a href="https://influencevibes.com/founder/"  class="menua" &gt;About Me&lt;/a&gt;&lt;/li&gt;
         &lt;li class="menub"&gt;&lt;a href="https://influencevibes.com/about/"  class="menua"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>