Experimenting with backdrop-filter in Chrome 76. I'm working on a menu with 2 divs, each with a backdrop-filter applied. The first div is displaying the filter effect perfectly, but the second one isn't. Interestingly, when I remove the filter from the first div, the second one works as expected. Any ideas or suggestions?
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);
}