배경 투명도는 적용되는데 .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

1개의 좋아요
Terraglass — a frosted-glass theme with considered light/dark palettes
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/투명 배경이 렌더링되지 않는 문제를 경험하신 분 계신가요?

3

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

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

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

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

이러한 CSS 변경 사항을 수행하는 방법을 안내하는 가이드가 있으니 도움이 될 수 있습니다. Making custom CSS changes on your site

1개의 좋아요
4

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

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

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

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

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

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

1개의 좋아요
5

네, 이건 좀 더 복잡한 문제입니다… 헤더와 같은 요소에 backdrop-filter가 적용되면 해당 요소가 효과의 루트(root)가 됩니다. 따라서 그 루트 안에 중첩된 하위 요소(드롭다운 패널 등)는 루트 내부의 내용물만 흐릿하게 만들 수 있습니다. 패널이 헤더를 벗어나더라도 헤더 너머의 페이지 콘텐츠는 볼 수 없기 때문에, 해당 영역에서는 흐림 효과가 적용되지 않습니다.

대신 이 루트 제한을 피하려면 헤더에 가상 요소(pseudo element)를 사용하는 것이 좋습니다.

.d-header {
  position: relative;
  isolation: isolate;
  background-color: transparent;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
}

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
  backdrop-filter: blur(12px);
}

.user-menu .quick-access-panel .read {
  background: transparent;
}
1개의 좋아요
6

(게시글이 작성자에 의해 삭제되었습니다)

1개의 좋아요