only one backdrop-filter working at a time

Issue

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);
}

Solution

Looks like backdrop-filter: doesn't play nice with div soups, I broke it up and it worked fine.

Answered By - andrew blake