Estoy personalizando un tema a medida que lleva tiempo en desarrollo y quería darle al menú hamburguesa/lateral (.menu-panel) el mismo aspecto translúcido y difuminado que ya funciona bien en .d-header. La transparencia funciona, pero el desenfoque no —y me gustaría señalar esto como retroalimentación, ya que un par de aspectos sobre cómo los estilos base manejan este componente lo hicieron más difícil de lo esperado.
Lo que estoy intentando lograr
Un panel de menú semitransparente con backdrop-filter: blur() detrás, de modo que el contenido de la página se insinúe a través del panel, similar al aspecto de vidrio esmerilado que usan muchas aplicaciones nativas. Tanto el efecto de transparencia como el desenfoque me importan —la transparencia sin desenfoque se ve desordenada sobre listas de temas con mucho contenido.
Lo que ya funciona
En .d-header, esto es todo lo que se necesita y funciona de manera fiable (probado en iOS Safari y Chrome de escritorio):
.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);
}
Lo que no funciona
La misma receta aplicada a .menu-panel me da la transparencia, pero nunca el desenfoque, en 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;
}
Cosas que probé para hacer que apareciera el desenfoque, ninguna de las cuales ayudó:
- Agregar
!importanta las declaraciones debackdrop-filter/-webkit-backdrop-filteren sí mismas. - Forzar una capa de composición dedicada con
transform: translateZ(0)combinado conoverflow: hidden(un truco común en Safari para otros problemas de backdrop-filter) —esto no hizo ninguna diferencia aquí, así que lo eliminé de nuevo en lugar de mantener un hack que no justificaba su presencia. - Confirmé que estoy apuntando al elemento correcto: según
menu-panel.scss, el fondo opaco se establece directamente en.menu-panel(no en un hijo como.panel-body), lo cual inicialmente tenía mal y luego corregí.
Si alguien sabe por qué .menu-panel se comporta de manera diferente a .d-header aquí, o tiene una receta que funcione, me encantaría saberlo.
Segundo problema: fondos codificados en las filas individuales del menú
Incluso con el fondo del propio panel hecho transparente, varias cosas dentro de él aún se renderizan sólidas, porque el núcleo establece su fondo directamente en lugar de a través del fondo del propio panel:
.user-notifications-list .ready.bookmark—las notificaciones leídas y los marcadores en el menú de usuario obtienenbackground-color: var(--secondary)directamente, por lo que cada fila aparece como un bloque opaco flotando sobre el panel translúcido..hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container—el pie de perfil/inicio de sesión en la parte inferior de la barra lateral tiene el mismo problema.
Puedo (y lo hice) sobrescribir estos en mi tema, pero significa buscar cada var(--secondary) codificado en menu-panel.scss uno por uno, y volverá a romperse la próxima vez que el núcleo agregue un nuevo elemento con el mismo patrón. Ayudaría mucho si estos cayeran en una propiedad personalizada de CSS en su lugar, por ejemplo, algo como --d-menu-panel-background con un valor predeterminado de var(--secondary), para que un tema solo necesite redefinir una variable para hacer que todo el panel —incluidas sus filas— sea consistentemente transparente, en lugar de perseguir selectores individuales.
Estoy feliz de compartir capturas de pantalla de antes/después si es útil, y de probar cualquier corrección sugerida en mi extremo.
