배경 투명도는 적용되는데 .menu-panel에 backdrop-filter(blur)가 작동하지 않음

기여 UX
1

장기적으로 커스텀 테마를 커스터마이징하고 있는데, 햄버거/사이드바 메뉴(.menu-panel)에 이미 .d-header에서 잘 작동하고 있는 동일한 반투명 및 블러 효과를 적용하려고 합니다. 투명도는 작동하지만 블러는 작동하지 않으며, 이 컴포넌트를 코어 스타일이 어떻게 처리하는지에 대한 몇 가지 사항이 예상보다 작업 난이도를 높였기 때문에 피드백으로 전달하고 싶습니다.

목표

backdrop-filter: blur()를 적용하여 메뉴 패널 뒤에 페이지 콘텐츠가 흐릿하게 보일 수 있도록 하는 반투명 메뉴 패널입니다. 이는 네이티브 앱에서 흔히 볼 수 있는 얼룩진 유리(frosted-glass) 효과와 유사합니다. 투명 효과와 블러 효과 모두 저에게는 중요합니다. 블러가 없는 투명도는 복잡한 토픽 목록 위에서 혼란스러운 외관을 만들 뿐이므로요.

이미 작동하는 부분

.d-header에는 다음 코드만 적용하면 신뢰할 수 있게 작동합니다 (iOS Safari 및 데스크톱 Chrome에서 테스트 완료):

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

작동하지 않는 부분

.menu-panel에 동일한 코드를 적용하면 투명도는 적용되지만, 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;
}

블러 효과를 나타나게 하려고 시도했지만 도움이 되지 않은 것들:

  • backdrop-filter/-webkit-backdrop-filter 선언 자체에 !important를 추가.
  • transform: translateZ(0)과 overflow: hidden을 결합하여 전용 컴포지팅 레이어를 강제 (다른 backdrop-filter 문제의 일반적인 Safari 우회 방법) — 여기서는 차이가 없었기 때문에, 그 자리를 차지할 가치가 없는 해킹 코드를 유지하기보다 다시 제거했습니다.
  • 올바른 요소를 타겟팅하고 있는지 확인: menu-panel.scss에 따라 불투명한 배경색은 .menu-panel에 직접 설정되어 있습니다(자식 요소인 .panel-body가 아님). 처음에는 이 부분을 잘못 이해했으나 나중에 수정했습니다.

.menu-panel이 왜 .d-header와 다르게 동작하는지, 또는 작동하는 레시피를 알고 계신 분이라면 기꺼이 듣고 싶습니다.

두 번째 문제: 개별 메뉴 행의 하드코딩된 배경색

패널 자체의 배경을 투명하게 만들었음에도 불구하고, 코어가 패널의 배경을 통해 간접적으로 설정하는 대신 배경색을 직접 설정하기 때문에 내부의 여러 요소가 여전히 단색(solid)으로 렌더링됩니다:

  • .user-notifications-list .read 및 .bookmark — 사용자 메뉴의 읽음 알림과 북마크에 background-color: var(--secondary)가 직접 설정되어 있어, 각 행이 반투명 패널 위에 떠 있는 불투명한 블록처럼 보입니다.
  • .hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container — 사이드바 하단의 프로필/로그인 푸터도 동일한 문제가 있습니다.

이것들은 제 테마에서 오버라이드할 수 있었고 실제로 그렇게 했습니다. 하지만 menu-panel.scss에서 하드코딩된 모든 var(--secondary)를 하나씩 찾아내는 것을 의미하며, 코어가 동일한 패턴으로 새 요소를 추가하는 다음 업데이트 시 다시 깨질 것입니다. 대신 CSS 커스텀 프로퍼티로 폴백되도록 하면 훨씬 도움이 될 것입니다. 예를 들어 var(--secondary)를 기본값으로 하는 --d-menu-panel-background와 같은 변수를 사용하면, 테마가 개별 셀렉터를 추적하는 대신 하나의 변수만 재정의하면 패널 전체(행 포함)를 일관되게 투명하게 만들 수 있습니다.

도움이 된다면 변경 전/후 스크린샷을 공유할 수 있으며, 제안된 수정 사항을 제 환경에서 테스트하는 것도 기꺼이 하겠습니다.

IMG_1129
IMG_11291290×2373 235 KB

IMG_1130
IMG_1130992×2364 241 KB

2

추가 질문: 동일한 가시적 투명도/블러 부재 문제가 .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/투명 배경이 렌더링되지 않는 문제를 경험하신 분 계신가요?