Ich passe ein lang laufendes Custom-Theme an und wollte dem Burger-/Sidebar-Menü (.menu-panel) denselben halbtransparenten, unscharfen Look geben, der bei .d-header bereits gut funktioniert. Die Transparenz funktioniert, aber der Blur-Effekt nicht – und ich möchte dies als Feedback markieren, da einige Aspekte der Kern-Styles für diese Komponente die Umsetzung schwieriger gemacht haben, als erwartet.
Was ich erreichen möchte
Ein halbtransparentes Menü-Panel mit backdrop-filter: blur() im Hintergrund, sodass der Seiteninhalt durch das Panel noch angedeutet wird, ähnlich dem gefrosten-Glas-Look, den viele native Apps verwenden. Sowohl der Durchsichteffekt als auch der Blur-Effekt sind mir wichtig – Transparenz ohne Blur sieht über dichten Themenlisten einfach nur unordentlich aus.
Was bereits funktioniert
Bei .d-header reicht dies und es funktioniert zuverlässig (getestet auf iOS Safari und Desktop Chrome):
.d-header {
background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
-webkit-backdrop-filter: blur(3px) saturate(1.2);
backdrop-filter: blur(3px) saturate(1.2);
}
Was nicht funktioniert
Das exakt gleiche Rezept, angewendet auf .menu-panel, liefert mir die Transparenz, aber nie den Blur-Effekt, auf iOS Safari:
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
}
Dinge, die ich versucht habe, um den Blur-Effekt zum Vorschein zu bringen, von denen keines geholfen hat:
- Hinzufügen von
!importantzu denbackdrop-filter/-webkit-backdrop-filter-Deklarationen selbst. - Erzwingen einer dedizierten Kompositing-Ebene mit
transform: translateZ(0)kombiniert mitoverflow: hidden(eine gängige Safari-Workaround für andere backdrop-filter-Probleme) – das hat hier keinen Unterschied gemacht, also habe ich es wieder entfernt, anstatt einen Hack zu behalten, der sich nicht bewährt hat. - Bestätigt, dass ich das richtige Element anspreche: Laut
menu-panel.scsswird der undurchsichtige Hintergrund direkt auf.menu-panelgesetzt (nicht auf einem Kind-Element wie.panel-body), was ich anfangs falsch verstanden und dann korrigiert habe.
Wenn jemand weiß, warum sich .menu-panel hier anders verhält als .d-header, oder ein funktionierendes Rezept hat, würde ich mich freuen, es zu hören.
Zweites Problem: Hardcodierte Hintergründe auf einzelnen Menüzeilen
Selbst wenn der Hintergrund des Panels selbst transparent gemacht wird, werden mehrere Elemente darin weiterhin undurchsichtig gerendert, da der Kern ihre Hintergründe direkt setzt, anstatt über den Hintergrund des Panels selbst:
.user-notifications-list .readund.bookmark– Gelesene Benachrichtigungen und Lesezeichen im Benutzer-Menü erhalten direktbackground-color: var(--secondary), sodass jede Zeile als undurchsichtiger Block auf dem halbtransparenten Panel erscheint..hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container– Der Profil-/Login-Footer am unteren Rand der Sidebar hat dasselbe Problem.
Ich kann (und habe) diese in meinem Theme überschrieben, aber das bedeutet, jedes hardcodierte var(--secondary) in menu-panel.scss einzeln herauszufinden, und es wird erneut kaputt gehen, wenn der Kern das nächste Mal ein neues Element mit demselben Muster hinzufügt. Es würde sehr helfen, wenn diese auf eine CSS-Custom-Property zurückfielen, z. B. etwas wie --d-menu-panel-background mit var(--secondary) als Standardwert, sodass ein Theme nur eine Variable neu definieren muss, um das gesamte Panel – einschließlich seiner Zeilen – konsistent transparent zu machen, anstatt einzelne Selektoren zu verfolgen.
Ich teile gerne Screenshots des Vorher/Nachher-Zustands, falls nützlich, und teste jeden vorgeschlagenen Fix auf meiner Seite.
