Backdrop-filter (blur) n'a aucun effet sur .menu-panel, bien que la transparence du fond fonctionne

Contribuer UX
2

Question de suivi : le même manque de transparence/effet de flou visible se manifeste désormais sur un autre élément qui partage le chemin de style .menu-panel — le champ de saisie du menu déroulant de recherche de l’en-tête (.search-input-wrapper, faisant partie du menu de recherche glimmer).

Recette (motif identique à celui de .d-header qui fonctionne, et à .menu-panel ci-dessus) :

.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;
}

Ce qui s’affiche correctement : la bordure fine (box-shadow) et le border-radius s’affichent exactement comme prévu — le sélecteur cible donc bien le bon élément et la règle est appliquée, sans être silencieusement écrasée.

Ce qui ne s’affiche pas : aucune transparence visible et aucun flou visible de ce qui se trouve derrière le champ, même symptôme que pour .menu-panel (panneau latéral/panneau hamburger) signalé plus haut. .d-header, qui utilise les trois mêmes lignes littérales (background-color via color-mix, -webkit-backdrop-filter, backdrop-filter), continue de fonctionner correctement.

Cela me fait de plus en plus soupçonner que le problème ne concerne pas .menu-panel lui-même, mais quelque chose que ces éléments de type menu déroulant/superposition partagent (un contexte de superposition créé ailleurs dans le noyau, une couche de composition qui n’est pas un bloc contenant approprié pour backdrop-filter, ou similaire) — plutôt que quelque chose lié à notre propre sélecteur ou à nos valeurs de propriétés, puisque les trois mêmes propriétés CSS se comportent différemment selon l’élément du noyau auquel elles sont attachées.

Quelqu’un a-t-il rencontré un problème de rendu de backdrop-filter/fond translucide spécifiquement sur le menu déroulant de recherche ou d’autres superpositions de la famille .menu-panel, alors que la même recette fonctionne sur l’en-tête ?