Sto personalizzando un tema personalizzato di lunga data e volevo dare al menu hamburger/sidebar (.menu-panel) lo stesso aspetto traslucido e sfocato che funziona già bene su .d-header. La trasparenza funziona, ma la sfocatura no — e vorrei segnalarlo come feedback, poiché alcuni aspetti del modo in cui lo stile principale gestisce questo componente lo hanno reso più difficile del previsto.
Cosa sto cercando di ottenere
Un pannello del menu semitrasparente con un backdrop-filter: blur() dietro, in modo che il contenuto della pagina sia ancora accennato attraverso il pannello, simile all’effetto vetro smerigliato utilizzato da molte app native. Sia l’effetto trasparente che la sfocatura sono importanti per me — la trasparenza senza sfocatura sembra solo disordinata su liste di argomenti affollate.
Cosa funziona già
Su .d-header, basta questo e funziona in modo affidabile (testato su iOS Safari e Chrome desktop):
.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);
}
Cosa non funziona
La stessa identica ricetta applicata a .menu-panel mi dà la trasparenza, ma mai la sfocatura, su 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;
}
Cose che ho provato per far apparire la sfocatura, nessuna delle quali ha aiutato:
- Aggiungere
!importantalle dichiarazioni stesse dibackdrop-filter/-webkit-backdrop-filter. - Forzare un layer di compositing dedicato con
transform: translateZ(0)combinato conoverflow: hidden(una soluzione comune per Safari per altri problemi di backdrop-filter) — questo non ha fatto alcuna differenza qui, quindi l’ho rimosso di nuovo piuttosto che mantenere un hack che non valeva la pena. - Ho confermato di stare targeting l’elemento giusto: secondo
menu-panel.scss, lo sfondo opaco è impostato direttamente su.menu-panel(non su un figlio come.panel-body), che inizialmente avevo sbagliato e poi corretto.
Se qualcuno sa perché .menu-panel si comporta in modo diverso da .d-header qui, o ha una ricetta funzionante, sarei lieto di sentirlo.
Secondo problema: sfondi hardcoded sulle singole righe del menu
Anche con lo sfondo del pannello reso trasparente, diverse cose dentro ad esso vengono ancora renderizzate solide, perché il core imposta il loro sfondo direttamente anziché attraverso lo sfondo del pannello stesso:
.user-notifications-list .reade.bookmark— le notifiche lette e i segnalibri nel menu utente ricevonobackground-color: var(--secondary)direttamente, quindi ogni riga appare come un blocco opaco che fluttua sul pannello traslucido..hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container— il footer del profilo/login in fondo alla sidebar ha lo stesso problema.
Posso (e l’ho fatto) sovrascrivere questi nel mio tema, ma significa cercare uno per uno ogni var(--secondary) hardcoded in menu-panel.scss, e si romperà di nuovo la prossima volta che il core aggiunge un nuovo elemento con lo stesso pattern. Aiuterebbe molto se questi facessero fallback a una variabile CSS personalizzata, ad esempio qualcosa come --d-menu-panel-background con valore predefinito var(--secondary), in modo che un tema abbia bisogno di ridefinire solo una variabile per rendere l’intero pannello — comprese le sue righe — coerentemente trasparente, invece di inseguire selettori individuali.
Sono felice di condividere screenshot del prima/dopo se utile, e di testare qualsiasi correzione suggerita da parte mia.
