Backdrop-filter sobre elemento filho com position absolute não funciona

To criando um toggle menu, porém a propriedade backdrop-filter da lista de opções (<ul>) não está surtindo efeito aparentemente. A ideia é que o fundo do elemento <ul> fique igual ao <header> com o blur aplicado. Cês sabem como corrigir isso? IMPORTANTE: Abram o demo em um navegador compatível com a propriedade backdrop-filter (chrome, por exemplo).

Link para pen

HTML

<div class="container">
  <header>
    <nav>
      <div class="menu__wrapper">
        <a href="index.html">
          <img src="https://picsum.photos/30"/>
        </a>
        <ul>
          <li>LinkedIn</li>
          <li>Contato</li>
          <li>Portifólio</li>
        </ul>
      </div>
    </nav>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a odio malesuada, facilisis augue non, maximus ipsum. Ut eu porta arcu. Sed dignissim, ex ut molestie tincidunt, nulla sapien facilisis sapien, sed tempus libero erat non urna. Maecenas eleifend nunc ut arcu efficitur finibus. Sed porttitor et erat consequat pretium. Nullam porttitor mattis ligula, a condimentum purus lacinia sit amet. Donec ac accumsan risus. Etiam fringilla neque sapien, eu lobortis nulla ullamcorper scelerisque. In venenatis pellentesque sem vitae aliquam. Aliquam accumsan elementum ante, sed bibendum neque. Curabitur dapibus nisi diam, eget pharetra lacus venenatis et. Cras mollis eros leo, tempus iaculis erat tempor non. Aliquam ut suscipit lectus. Etiam non tellus laoreet, imperdiet urna nec, aliquet nulla. Cras accumsan metus in auctor congue. Sed consequat, eros vitae hendrerit tincidunt, sem nisl vulputate sem, vitae hendrerit lorem lacus ut ipsum.</p>
</div>

SCSS

// SMOOTH RESET
*,
*::before,
*::after {
  box-sizing: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
}

// VEJA AS LINHAS ABAIXO
header {
  background-color: rgba(0, 180, 0, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  nav {
    padding: 0 3rem;
  }
}

.menu__wrapper {
  padding: 1.6rem 0;
  position: relative;
  ul {
    background-color: rgba(0, 180, 0, .8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-weight: bold;
    left: -3rem;
    right: 3rem;
    position: absolute;
    top: 99%;
    padding: 2rem 3rem;
    width: 100vw;
    z-index: 1;
    li {
      border-bottom: 1px solid rgba(250, 250, 250, 0.15);
      padding: 1.5rem 0;
      &:first-child {
        padding: 0 0 1.4rem;
        }
      &:last-child {
        border: none;
        padding: 1.4rem 0 0;
      }
      a {
        color: black;
      }
    }
  }
}

Obs: Eu preciso que o <ul> fique fora do fluxo, pq posteriormente haverá um botão hambuguer no canto direito do <header> que irá dropar o menu de opções. Por isso usei position: absolute

No link abaixo deixo uma imagem para exemplificar o que eu esperava que acontecesse e o que acontece.

https://imgur.com/gallery/pxUMYpr