only one backdrop-filter working at a time

Question

Im playing around with backdrop-filter: in chrome 76. I'm trying to make a menu with 2 divs, with a backdrop-filter on each. The first div works perfectly, but the second one is not having the filter effect applied. When I remove the 1st div's filter, the 2nd one works. Any thoughts? codepen link: https://codepen.io/andrewthegreat5/pen/LKzaEL

HTML

<div id="mySidenav" class="sidenav" onmouseover="openNav()">
    <a class="active" href="#">Home</a>
    <a href="page2.html">page2</a>
    <a href="page3.html">page3</a>
    <a href="#" target="_blank">page4</a>
    <div id="mouse" class="mouseout" onmouseout="closeNav()">
        <div class="flyoutTab">Menu</div>
    </div>
</div>

CSS

.sidenav{
  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.1);
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 4%;
  backdrop-filter: blur(5px);
}

.mouseout{
  height: 100%;
  width: 5%;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  overflow-x: hidden;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}

Answer 1

看起来像背景过滤器：不适合 div 汤，​​我把它拆了，效果很好。

Answer 2

An ideal way to go about this is to create to class in your style sheet, something like

.remove-blur {
    backdrop-filter: none;
  }

  .add-blur {
    backdrop-filter: blur(80px);
  }

Then commence using Javascript to toggle via DOM where you want to apply it

Answer 3

You can use the ::before pseudo-element to apply a backdrop-filter to multiple divs.

For example:

// only one working backdrop-filter at a time
@mixin glance-effect() {
  background-color: rgba(var(--color-bg-base-rgb), 0.4);
  backdrop-filter: blur(4px);
}


// as many backdrop-filters as you want
@mixin glance-effect($blur_size: 4px) {
  isolation: isolate;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;

    background-color: rgba(var(--color-bg-base-rgb), 0.4);
    backdrop-filter: blur($blur_size);
  }
}