Pregunta de seguimiento: la misma falta de transparencia/difuminado visible ahora también aparece en otro elemento que comparte la ruta de estilo .menu-panel: el campo de entrada del menú desplegable de búsqueda de la cabecera (.search-input-wrapper, parte del menú de búsqueda de glimmer).
Receta (patrón idéntico al de .d-header que funciona, y al de .menu-panel anterior):
.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;
}
Lo que se renderiza correctamente: el borde fino (box-shadow) y el border-radius aparecen exactamente como se esperaba, por lo que el selector está coincidiendo con el elemento correcto y la regla se está aplicando, sin ser anulada silenciosamente.
Lo que no se renderiza: no hay transparencia visible ni difuminado visible de lo que hay detrás del campo, el mismo síntoma que .menu-panel (panel lateral/menú hamburguesa) reportado anteriormente. .d-header, que utiliza las mismas tres líneas literales (background-color mediante color-mix, -webkit-backdrop-filter, backdrop-filter), sigue funcionando sin problemas.
Esto me hace sospechar cada vez más que no se trata de algo específico de .menu-panel en sí, sino de algo que comparten estos elementos de tipo menú desplegable/superposición (un contexto de apilamiento creado en otro lugar del núcleo, una capa de composición que no es un bloque contenedor adecuado para backdrop-filter, o algo similar), en lugar de algo relacionado con nuestro propio selector o valores de propiedad, ya que las mismas tres propiedades CSS se comportan de manera diferente dependiendo de a qué elemento del núcleo estén unidas.
¿Alguien ha encontrado que backdrop-filter/fondo translúcido no se renderice específicamente en el menú desplegable de búsqueda u otras superposiciones de la familia .menu-panel, a pesar de que la misma receta funciona en la cabecera?