안녕하세요! 커스텀 테마를 만들려고 "air theme"를 포크해서 몇 가지 수정을 했는데, 카테고리 및 태그 드롭다운 메뉴가 이상한 위치에 표시되는 것을 발견했습니다.
이것이 발생하는 원인이 무엇일지 아시나요? 제 테마에서 JS 관련 내용은 아무것도 변경하지 않았고, CSS만 수정했습니다. 제 코드는 여기서 확인하실 수 있습니다: GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option. · GitHub
기본 "air theme"를 선택하면 드롭다운 메뉴가 올바른 위치에 표시되므로 제 테마에서 비롯된 문제일 것입니다. 또한 "transform"이나 “inset” 속성도 변경하지 않았습니다.
도움 주실 분을 기다리고 있습니다. 감사합니다!
이건 좀 예상치 못한 문제인데, 포지셔닝이 영향을 받는 것 같습니다.
html body #main-outlet {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
이 줄들을 제거하면 제 환경에서는 문제가 해결됩니다.
사실 backdrop-filter는 CSS에서 새로운 블록 컨텍스트를 생성하는 것 같습니다. 더 자세한 정보는 여기에서 확인하세요… https://stackoverflow.com/a/52937920/1869753
즉,
position:fixed요소가 뷰포트가 아닌 필터가 적용된 컨테이너를 기준으로 상대적으로 위치하게 됩니다. 다시 말해, 여전히 고정(fixed) 상태이지만 새로운 포함 블록(필터가 적용된 컨테이너) 안에 위치하게 되는 것입니다.
와, 정말 감사합니다! 그걸 제거해야 할 줄은 꿈에도 몰랐어요. 제거해서 배경 흐림 효과를 대체할 방법을 찾아보겠습니다. 정말 감사합니다.