추가 질문: 동일한 가시적 투명도/블러 부재 문제가 .menu-panel 스타일링 경로를 공유하는 다른 요소에서도 발생하고 있습니다 — 헤더 검색 드롭다운의 입력 필드(.search-input-wrapper, 글리머 검색 메뉴의 일부)입니다.
레시피(정상 작동하는 .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(사이드바/햄버거 패널)의 증상과 동일합니다. 문자 그대로 동일한 세 줄(color-mix를 통한 background-color, -webkit-backdrop-filter, backdrop-filter)을 사용하는 .d-header는 여전히 정상적으로 작동합니다.
이로 인해 이는 .menu-panel 자체에 특화된 문제가 아니라, 이러한 드롭다운/오버레이 스타일 요소들이 공유하는 무언가(코어 다른 곳에서 생성된 스택킹 컨텍스트, backdrop-filter에 대한 적절한 포함 블록이 아닌 합성 레이어 등) 때문일 가능성이 점점 더 커지고 있습니다. 동일한 세 가지 CSS 속성이 어떤 코어 요소에 첨부되느냐에 따라 다르게 작동하므로, 우리 자신의 셀렉터나 속성 값 때문이라고 보기 어렵기 때문입니다.
헤더에서는 동일한 레시피가 작동하는데도, 검색 드롭다운이나 기타 .menu-panel 계열 오버레이에서 특히 backdrop-filter/투명 배경이 렌더링되지 않는 문제를 경험하신 분 계신가요?