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

**URL:** <https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534>\
**Category:** UX\
**Created:** [9월 29, 2026, 8:45오전 UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534 "2026-09-29T08:45:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![terraboss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terraboss/32/579307_2.png) [@terraboss](https://meta.discourse.org/u/terraboss)\
**Post date:** [9월 29, 2026, 8:45오전 UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534/1 "2026-09-29T08:45:06Z")

</div>

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

**목표**

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

**이미 작동하는 부분**

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

```scss
.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에서는 블러 효과가 전혀 나타나지 않습니다:

```scss
.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](https://global.discourse-cdn.com/meta/original/4X/7/8/4/784d99f2e3e7241086c8d2f7795c42b1db6a4710.jpeg)

 ![IMG_1130](https://global.discourse-cdn.com/meta/original/4X/a/e/f/aef08a9eaa691c269118c7631084bdbaa2385c56.jpeg)

---

<div class="post-metadata">

**Author:** ![terraboss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terraboss/32/579307_2.png) [@terraboss](https://meta.discourse.org/u/terraboss)\
**Post date:** [9월 29, 2026, 9:46오전 UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534/2 "2026-09-29T09:46:11Z")

</div>

추가 질문: 동일한 가시적 투명도/블러 부재 문제가 `.menu-panel` 스타일링 경로를 공유하는 다른 요소에서도 발생하고 있습니다 — 헤더 검색 드롭다운의 입력 필드(`.search-input-wrapper`, 글리머 검색 메뉴의 일부)입니다.

**레시피(정상 작동하는 `.d-header` 및 위의 `.menu-panel`과 동일한 패턴):**

```scss
.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/투명 배경이 렌더링되지 않는 문제를 경험하신 분 계신가요?**

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [9월 29, 2026, 3:45오후 UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534/3 "2026-09-29T15:45:35Z")

</div>

문제는 각 읽음 알림에 별도의 배경색이 적용되어 있어 이를 오버라이드해야 한다는 점입니다. 이는 다른 변경 사항과 함께 도움이 될 것입니다.

```css
.user-menu .quick-access-panel .read {
  background: transparent;
}

```

검색 입력 필드도 마찬가지입니다. 여기에 별도의 배경색이 적용되어 있어 제거해야 합니다:

```css
.search-menu .search-input, .search-menu-container .search-input {
  background: transparent;
}

```

이러한 CSS 변경 사항을 수행하는 방법을 안내하는 가이드가 있으니 도움이 될 수 있습니다. [Making custom CSS changes on your site](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101)

---

<div class="post-metadata">

**Author:** ![terraboss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terraboss/32/579307_2.png) [@terraboss](https://meta.discourse.org/u/terraboss)\
**Post date:** [9월 29, 2026, 4:25오후 UTC](https://meta.discourse.org/t/backdrop-filter-blur-has-no-effect-on-menu-panel-even-though-background-transparency-works/413534/4 "2026-09-29T16:25:15Z")

</div>

정말 감사합니다! — 두 가지 수정 사항 모두 설명하신 대로 정확히 작동했습니다.

같은 문제를 겪고 계신 분들을 위해: 게시해주신 두 가지 오버라이드 외에도 `.search-menu-panel` 안에 중첩된 `.results` 요소가 `.menu-panel`과 독립적으로 자체의 불투명 배경을 그리는 문제가 있었으며, 이 부분에도 동일한 처리가 필요했습니다:

```scss
.search-menu-panel .results {
  background: transparent !important;
}

```

이것과 함께 두 개의 스니펫을 적용하니 이제 사이드바, 햄버거 패널, 퀵 액세스 알림, 결과 목록을 포함한 전체 검색 드롭다운까지 모든 곳에서 투명도가 깔끔하게 작동합니다. 텍스트는 전체적으로 완벽하게 가독성이 유지되므로, 투명도 측면에서는 이제 완전히 해결되었습니다.

아직 남은 부분은 이 스레드의 원래 주제인 `backdrop-filter`/블러 자체입니다. 모든 배경이 이제 올바르게 투명해졌음에도 불구하고, 이러한 요소 중 어느 곳에서도 블러 효과가 나타나지 않습니다. 이전과 동일한 증상이며, 동일한 `backdrop-filter` 레시피가 정상적으로 렌더링되는 `.d-header`와 여전히 대비를 이룹니다. 따라서 투명도 측면은 해결되었지만, 블러 측면은 여전히 미해결 상태입니다.

이 문제를 깊이 파고들어 주셔서 다시 한번 감사합니다. 정말 큰 도움이 되었습니다.