Bir header'ım var. HTML:

<header>

  <h1>Başlık</h1>

  <ul>

    <li><a href="#home"><i class="fas fa-home"></i>Ana Sayfa</a></li>
    <li><a href="#services"><i class="fas fa-toolbox"></i>Servislerimiz</a></li>
    <li><a href="#about"><i class="far fa-address-card"></i>Hakkımızda</a></li>
    <li><a href="#contact"><i class="fas fa-phone-alt"></i>İletişim</a></li>

  </ul>

</header>

CSS:

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(2px);
}
header h1 {
  border-radius: 15px;
  font-size: 30px;
}
header ul {
  display: flex;
}
header ul li a {
  display: flex;
  margin: 0 10px;
  color: #3f3f3f;
  transition: 500ms;
  padding: 11px 10px 10px 10px;
  position: relative;
  overflow: hidden;
}

Telefondan girildiğinde listeme bu şekilde CSS ekliyorum

  ul {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
  }

Ancak header'ımda backdrop-filter özelliğini kaldırmadığımda ul'em header'a göre yerleşiyor.
Header'daki backdrop-filter'a none veya blur(0) verdiğimde diğer header gözükmüyor sadece ul gözüküyor
Edit: Şu an baktım header'da ki backdrop-filter'ı en başta da kaldırsam sadece ul gözüküyor header'ın background'u ve başlığımı göremiyorum.