CSS Backdrop-filter not functioning on child element in slideout menu

Question

I am trying to apply a backdrop-filter effect to a slideout menu that consists of two nested divs. I've managed to navigate the issue of how that changes the positioning of the elements, but for some reason, so long as the bottom part of the menu is nested inside the top "tab", the filters on the lower portion don't function, as seen on the left. It does work if applied only to the inner div (as seen on the right) but I would like to have the effect on both. If they aren't nested, I don't know how to make the slideout transition on hover work.

The closest I have found to a discussion of this issue is here but I'm not really sure how it applies.

Here's the demo:

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  position: fixed;
  bottom: 0px;
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuUpperRight {
    right: 40px;
}
#menuUpperLeft {
    left: 40px;
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  position: fixed;
  bottom: -120px;
  right: 40px;
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}
#menuLowerRight {
  right: 40px;
  border-radius: 10px 0 0 0;
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
#menuLowerLeft {
  left: 0px;
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassUpper:hover {
  bottom: 120px;
}
#menuUpperRight:hover #menuLowerRight {
  bottom: 0;
}

<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->
  <div class="glassUpper" id="menuUpperRight">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
    <div class="glassLower" id="menuLowerRight">
        <p>Working when applied to child dev only!</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div> 

  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>

    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
  </div> 

Answer 1

Using an extra wrapper can solve this issue, you can then have your elements upper/lower as separate inside:

body {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px);
  height: 100%;
  width: 100%;
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #F0F8FF;
}

/* -------------------GLASS EFFECT------------------- */

.glass {
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.45) 24%,
      hsla(0, 0%, 100%, 0.4) 25%,
      hsla(0, 0%, 100%, 0.2) 45%,
      hsla(0, 0%, 100%, 0.1)
    );
  background-size: 300% 100%;
  border-radius: 10px;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
}
.frame {
  padding: 20px;
}
.centered {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -------------------Menu version------------------- */

.glassUpper {
  width: 35px;
  height: 30px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  padding: 5px 2px 0 2px;
  text-align: center; 
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuUpperLeft {
    backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}
.glassLower {
  width: 200px;
  height: 110px;
  padding: 5px 0px;
  background:
    radial-gradient(
      ellipse at 16.7% -10%,
      hsla(0, 0%, 100%, 0.4) 24%,
      hsla(0, 0%, 100%, 0.3) 25%,
      hsla(0, 0%, 100%, 0.1) 45%,
      hsla(0, 0%, 100%, 0.05)
    );
  background-size: 300% 100%;
  text-align: center;
  opacity: 0.75;
  box-shadow:
    0 2px 1px hsla(0, 0%, 100%, 0.5) inset, /* Highlight upper edge */
    0 -2px 1px hsla(250, 70%, 5%, 0.3) inset, /* Shade lower edge */
    0 -2px 6px hsla(0, 0%, 100%, 0.25); /* Imply light cast around the edges */
  transition: bottom 1s;
  transition-duration: 400ms ease-in;
}

#menuLowerLeft {
  border-radius: 0 10px 0 0;
  transform: translate3d(0, 0, 0);
  backdrop-filter: contrast(130%) brightness(120%) blur(2px);
}

.extra{
  position: fixed;
  top: calc(100% - 35px);
  left: 40px;
  transition:0.5s;
  pointer-events:none;
}
.extra * {
  pointer-events:initial;
}
.extra:hover {
  top: calc(100% - 155px);
}

<!-- First -->
<div class="glass frame centered">
  <section class="content">
    <p>A light glass-effect frame.</p>
  </section>
</div>

<!-- Menus! -->

  <div class="extra">
  <div class="glassUpper" id="menuUpperLeft">
     <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="rgba(240, 248, 255, 0.75)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="17.291" x2="12" y2="10.708"/>
      <line x1="12" y1="6.708" x2="12.01" y2="6.708"/>
    </svg>
  </div>
    <div class="glassLower" id="menuLowerLeft">
        <p>Backdrop Filters broken on child div???</p>
      <!-- custom play and pause buttons -->
      <button class="radioButton" id="play">Play</button>
      <button class="radioButton" id="pause">Pause</button>
      <!-- Credits -->
      <button class="bigButton" id="credits">Credits</button>
    </div>
    </div>