Куда пропадает свойство fixed у элемента, если у родителя прописано свойство transform-style: preserve-3d;

window.addEventListener("scroll", function() {
  if (window.pageYOffset >= 100) {
    console.log(getComputedStyle(dupHeader)['position']);
    console.log(getComputedStyle(dupHeader)['top']);
    console.log(getComputedStyle(dupHeader)['transform']);
    dupHeader.classList.add("active");
  } else {
    dupHeader.classList.remove("active");
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  background-color: #272727;
  color: white;
}

#wrapper {
  min-height: 1000vh;
  display: grid;
  grid-template-rows: 100px 1fr 100px;
  perspective: 1px;
  transform-style: preserve-3d;
}

header,
main,
footer {
  background-image: radial-gradient(circle at 65% 15%, aqua, darkblue);
}

#dupHeader {
  background-color: #00f;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  transform: translateY(100%);
  transition: all .5s;
  transform-origin: top center;
  z-index: 99999999;
}

#dupHeader.active {
  background-color: #00f;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  transform: translateY(200%);
  transform-origin: top center;
  transition: all .5s
}

<div id="wrapper">
  <header>
    <div id="mainHeader">MainHeader</div>
    <div id="dupHeader">DupHeader</div>
  </header>
  <main>
    Main
  </main>
  <footer>
    Footer
  </footer>
</div>