Nachfrage: Dasselbe Fehlen von sichtbarer Transparenz/Unschärfe tritt nun auch bei einem anderen Element auf, das den gleichen Stilpfad wie .menu-panel nutzt – dem Eingabefeld des Such-Dropdowns in der Kopfzeile (.search-input-wrapper, Teil des Glimmer-Suchmenüs).
Rezept (identisches Muster wie bei der funktionierenden .d-header und bei .menu-panel oben):
.search-menu .search-input-wrapper {
background: color-mix(in srgb, var(--header_background) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
box-shadow: 0 0 0 1px var(--primary-low-mid);
overflow: hidden;
}
.search-menu .search-input {
background: transparent !important;
}
Was korrekt gerendert wird: Der Haarscharfe Rand (box-shadow) und der border-radius erscheinen beide exakt wie erwartet – der Selektor trifft also das richtige Element und die Regel wird angewendet, statt stillschweigend überschrieben zu werden.
Was nicht gerendert wird: Keine sichtbare Transparenz und keine sichtbare Unschärfe des Inhalts hinter dem Feld, dasselbe Symptom wie bei .menu-panel (Seitenleiste/Hamburger-Panel), das oben gemeldet wurde. .d-header, das die exakt gleichen drei Zeilen (background-color über color-mix, -webkit-backdrop-filter, backdrop-filter) verwendet, funktioniert weiterhin einwandfrei.
Dadurch wird mein Verdacht immer stärker, dass es nicht spezifisch an .menu-panel selbst liegt, sondern an etwas, das diese Dropdown-/Overlay-artigen Elemente gemeinsam haben (ein Stapelkontext, der woanders im Kern erstellt wird, eine Kompositionsschicht, die kein korrektes umgebendes Blockelement für backdrop-filter ist, oder Ähnliches) – und nicht an unserem eigenen Selektor oder den Eigenschaftswerten, da die exakt gleichen drei CSS-Eigenschaften sich je nach dem Kern-Element, an dem sie befestigt sind, unterschiedlich verhalten.
Hat jemand schon einmal das Problem gehabt, dass backdrop-filter/transparenter Hintergrund speziell im Such-Dropdown oder in anderen Overlays der .menu-panel-Familie nicht gerendert wird, obwohl dasselbe Rezept in der Kopfzeile funktioniert?