Ich habe ein div.outer und in einem div.innerbeide mit position: absolute; Und backdrop-filter: blur(8px);.

https://jsbin.com/nihakiqocu/1/edit?html,css,output

Safari (links) liefert das gewünschte Ergebnis – beide Divs verwischen, was sich hinter ihnen befindet.

Chrome (rechts) wendet jedoch nur die Unschärfe von an div.outer:

Ich habe eine Lösung: ein weiteres Div hinzufügen div.outer und bewegend backdrop-filter: blur(8px); zu dieser neuen Abteilung.

Ich würde mich jedoch über eine Lösung freuen, die keine Änderung des DOM vom ersten jsbin erfordert. Weiß jemand außerdem, was dies verursacht? Handelt es sich um einen Chrome-Fehler?

https://jsbin.com/rasudijame/1/edit?html,css,output

PS: Es funktioniert auf iOS Chrome, aber nicht auf Android Chrome und auch nicht auf Mac OS Chrome

Platzieren Sie den Hintergrundfilter auf dem CSS-Pseudoelement. Dies ermöglicht verschachtelte Hintergrundfilter. Sie können es auch verwenden z-index: -1; um Ihren Hintergrund hinter Ihren Elementen zu positionieren

div {
  height: 100px;
  width: 100px;
}
.wrapper {
  position: absolute;
}
.outer, .inner {
  position: relative;
}
.outer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.outer {
  background: rgba(255, 0, 0, .5);
}
.inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  
}
.inner {
  background: rgba(0, 0, 255, .5);
  top: 50px;
  left: 50px;
}
main {
  position: relative;
}

<main>
  <div class="wrapper">
    <div class="outer">
      <div class="inner"></div>
    </div>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus in id quos, est voluptatibus minus porro sunt totam quod commodi odit maxime similique, dolorum aut quo atque. Deleniti, voluptas animi.</p>
</main>

Und hier ist Codepen

Diese Antwort vervollständigt die von @Michał (die bei mir funktioniert hat). Kurze Antwort: Chrome verhindert freiwillig das Stapeln verschachtelter Hintergrundfilter.

Warum sich Chrome so verhält

A sehr ähnliches Problem wurde im Chromium Bugs Tracker gemeldet. Zitieren einer Antwort auf diesen Fehlerbericht:

Der Hintergrundfilter filtert alles dahinter, bis hin zur „Hintergrundwurzel“, die aus mehreren Triggern besteht. Einer dieser Auslöser ist ein weiteres Hintergrundfilterelement.

Also im Grunde, wenn Sie hinzufügen backdrop-filter Für ein Element wird es zum neuen Hintergrundstamm: Verschachtelte Hintergrundfilter werden NICHT auf seine Vorfahren angewendet, da sie nicht über den Stamm „sehen“ können.

<elem1>
  <!-- Here, backdrop filter will apply to elem1, -->
  <!-- as it is an ancestor of elem2 -->
  <elem2 style="backdrop-filter: ...">
    <!-- Here, backdrop filter will apply to elem2, -->
    <!-- but not elem1, as elem2 is now the new Backdrop root -->
    <elem3 style="backdrop-filter: ...">
    </elem3>
  </elem2>
</elem1>

Chrome folgt tatsächlich einer W3C-Empfehlung (so scheint es zumindest). Wenn Sie die Motivation haben, können Sie den vollständigen Grund für dieses Verhalten unter lesen dieser W3C-Entwurf.

Warum die akzeptierte Antwort funktioniert

Der :before ist ein Pseudoelement, das heißt, es hat kein untergeordnetes Element. Selbst wenn es zum Hintergrundstamm wird, blockiert es daher nicht die Anwendung verschachtelter Filter auf seine Vorgänger.

Warum es in anderen Browsern funktioniert

Ab Mai 2023 konnte ich dieses Verhalten auf Chrome, Safari und Firefox testen. Nur Chrome scheint diesem W3C-Entwurf zu folgen, da Elemente in Safari und Firefox korrekt unscharf gemacht wurden. Den Antworten auf den Fehlerbericht zufolge weichen Safari und Firefox jedoch von den Spezifikationen ab.

Zusammenfassung

Wenn Sie möchten, dass ein Element mit einem Hintergrundfilter verschachtelte Hintergründe zulässt (z. B. eine transparente Navigationsleiste mit einem Dropdown-Menü, die beide einen Unschärfe-/Transparenzeffekt haben), sollten Sie den Filter auf ein Pseudoelement anwenden, wie @Michał vorgeschlagen hat :

/* replace */
.parent {
  backdrop-filter: /*...*/;
}

/* with */
.parent::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: /*...*/;
    z-index: -1;
}

Hinweis: Dies ist nur erforderlich, wenn der übergeordnete Container verschachtelte Elemente mit einem Hintergrundfiltersatz enthält, nicht jedoch bei „Blätter“-Elementen.