Вопрос для продолжения: та же проблема с отсутствием видимой прозрачности/размытия теперь проявляется и на другом элементе, который использует тот же путь стилей .menu-panel — поле ввода в выпадающем меню поиска в шапке (.search-input-wrapper, часть меню поиска glimmer).
Рецепт (идентичен рабочему варианту для .d-header и для .menu-panel выше):
.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;
}
Что отображается корректно: тонкая рамка (box-shadow) и border-radius отображаются именно так, как ожидается, — значит, селектор находит нужный элемент, правило применяется и не затирается другими стилями.
Что не отображается: нет видимой полупрозрачности и нет видимого размытия того, что находится за полем, — та же симптоматика, что и у .menu-panel (боковой панели/меню-гамбургера), о которой говорилось выше. При этом .d-header, использующий буквально те же самые три строки (background-color через color-mix, -webkit-backdrop-filter, backdrop-filter), продолжает работать без проблем.
Всё больше складывается впечатление, что дело не в самом .menu-panel, а в чём-то, что объединяет эти элементы типа выпадающих меню/оверлеев (контекст наложения, создаваемый где-то в ядре, слой композитинга, который не является надлежащим содержащим блоком для backdrop-filter, или что-то подобное), — а не в наших собственных селекторах или значениях свойств, ведь одни и те же три CSS-свойства ведут себя по-разному в зависимости от того, к какому элементу ядра они привязаны.
Кто-нибудь сталкивался с тем, что backdrop-filter/полупрозрачный фон не отображается именно в выпадающем меню поиска или в других оверлеях семейства .menu-panel, хотя тот же рецепт работает в шапке?