Je personnalise un thème personnalisé existant depuis longtemps et je voulais donner au menu hamburger/barre latérale (.menu-panel) le même effet translucide et flouté qui fonctionne déjà très bien sur .d-header. La transparence fonctionne, mais le flou non — et je souhaite signaler ce point en tant que retour d’expérience, car plusieurs aspects de la façon dont les styles principaux gèrent ce composant ont rendu la tâche plus difficile que prévu.
Ce que j’essaie d’obtenir
Un panneau de menu semi-transparent avec un backdrop-filter: blur() derrière, afin que le contenu de la page reste perceptible à travers le panneau, similaire à l’effet de verre dépoli utilisé par de nombreuses applications natives. L’effet de transparence et le flou sont importants pour moi — la transparence sans flou a l’air brouillon sur les listes de sujets chargées.
Ce qui fonctionne déjà
Sur .d-header, il suffit de ceci et cela fonctionne de manière fiable (testé sur iOS Safari et Chrome bureau) :
.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);
}
Ce qui ne fonctionne pas
La même recette appliquée à .menu-panel me donne la transparence, mais jamais le flou, sur 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;
}
J’ai essayé plusieurs choses pour faire apparaître le flou, sans succès :
- Ajouter
!importantaux déclarationsbackdrop-filter/-webkit-backdrop-filterelles-mêmes. - Forcer une couche de compositing dédiée avec
transform: translateZ(0)combiné àoverflow: hidden(un contournement courant pour d’autres problèmes de backdrop-filter sur Safari) — cela n’a fait aucune différence ici, donc je l’ai retiré plutôt que de garder un hack qui ne se justifiait pas. - J’ai confirmé que je cible le bon élément : selon
menu-panel.scss, l’arrière-plan opaque est défini directement sur.menu-panel(et non sur un élément enfant comme.panel-body), ce que j’avais initialement mal compris avant de corriger.
Si quelqu’un sait pourquoi .menu-panel se comporte différemment de .d-header ici, ou a une recette qui fonctionne, je serais ravi de l’entendre.
Deuxième problème : arrière-plans codés en dur sur les lignes individuelles du menu
Même avec l’arrière-plan du panneau rendu transparent, plusieurs éléments à l’intérieur restent pleins, car le cœur définit leur arrière-plan directement plutôt que via l’arrière-plan du panneau lui-même :
.user-notifications-list .readet.bookmark— les notifications lues et les signets dans le menu utilisateur reçoiventbackground-color: var(--secondary)directement, de sorte que chaque ligne apparaît comme un bloc opaque flottant sur le panneau translucide..hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container— le pied de page du profil/connexion en bas de la barre latérale a le même problème.
Je peux (et l’ai fait) remplacer ces styles dans mon thème, mais cela implique de traquer chaque var(--secondary) codé en dur dans menu-panel.scss un par un, et cela cassera à nouveau la prochaine fois que le cœur ajoutera un nouvel élément avec le même motif. Cela aiderait beaucoup si ces éléments renvoyaient par défaut à une variable CSS personnalisée, par exemple quelque chose comme --d-menu-panel-background avec une valeur par défaut de var(--secondary), afin qu’un thème n’ait besoin que de redéfinir une seule variable pour rendre le panneau entier — y compris ses lignes — uniformément transparent, au lieu de traquer des sélecteurs individuels.
Je suis prêt à partager des captures d’écran avant/après si cela peut aider, et à tester toute correction suggérée de mon côté.
