설명
오른쪽 열의 고급 검색 드롭다운 메뉴가 예상했던 위치가 아니라 오른쪽 상단에 표시되고 있습니다
재현 방법
- Mac에서 Safari 사용
- “Meta Branded” 테마 사용
- Search results for '' - Discourse Meta 로 이동
- 오른쪽 열의 메뉴 클릭
플랫폼
Mac (데스크톱)
브라우저
Safari
4개의 좋아요
좋은 지적이에요. 정말 이상한 현상이네요. 오른쪽 열의 항목들에서만 이런 문제가 발생하고 있습니다. 배경 이미지를 사용하는 모든 테마에서 이런 문제가 일어나고 있어요.
body::before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
filter: brightness(var(--brightness));
background-image: url($blobs-other), url($blobs-yellow), url($blue-wave);
background-size: 103vw, 103vw, 100vw;
background-repeat: no-repeat;
background-position: 50% 125%, 0px 95px, 0px 175px;
@media screen and (max-width: 1000px) {
background-attachment: scroll;
}
@media screen and (max-width: 800px) {
background-size: 103vw, 103vw, 200vw;
background-position: 50% 125%, 0px 95px, 0px 175px;
}
}
air 테마와 graceful 테마에서도 같은 문제가 발생하는 것을 확인했습니다. 이 두 테마 모두 이렇게 동작하고 있네요.
추측이지만, filter가 스택킹 컨텍스트를 변경해서 문제를 일으키는 것 같네요. jordan, 이 배경을 다른 방식으로 처리할 수 있는 방법이 있을까요?
첫 단계로 filter를 빼고 동작하는지 테스트해 보실 수 있을까요?
1개의 좋아요
그 방법을 시도해 보았지만 작동하지 않습니다. 제 지식으로는 before를 통해 첨부하는 것이 유일한 방법이며, 이렇게 해야만 페이지/스크롤에 영향이 없게 됩니다.
와, 정말 기이한 버그네요. absolute는 동작하는데 fixed를 쓰면 깨져요. 이상하게도 :before 대신 ::after를 사용하면 이것도 잘 동작하네요…
인스펙터에서 이 부분을 테스트해 보았는데, ::after로 교체하면 배경 이미지가 숨겨집니다.
아, 미안합니다. 그게 해결책이라고 말하려는 건 아니었어요. 저것도 해결책은 아니고, 그 이상한 현상과 관련이 있는 다른 요소들을 지적한 것뿐이에요.
기본적으로 배경에서 이미지를 “제거”하는 모든 방법, 즉 위치 지정, after, 또는 폭을 0으로 설정하는 것 등이 드롭다운을 “수정”합니다.
1개의 좋아요
조프리는 이것이 사파리(Safari)의 문제일 수 있다고 의심했습니다. 정말 이상한 점은, 인스펙터(inspector)에서 메뉴가 화면에 적절하게 배치되어야 한다고 표시된다는 것입니다. 픽셀과 수치는 모두 정확합니다.
사파리에서 메뉴 배치 설정의 “fixed” 체크를 해제한 후 다시 켜면 메뉴가 올바르게 배치되는 것을 확인할 수 있습니다.
이러한 BG(배경) 이미지 사용 사례는 2020년 이전부터 적용되어 왔기 때문에, 이것이 최근에 생긴 문제인지, 아니면 처음부터 작동하지 않던 것인지, 그리고 이것이 처음 보고되는 것인지 궁금합니다.
저도 그 문제를 겪었습니다. 전에 그런 현상을 경험해 본 적이 없어요. 마치 잘못된 뷰포트 좌표에 대해 위치를 잡고 있는 것처럼 느껴지거나(인스펙터에서 translate3d 좌표는 정확하지만 실제 위치와 일치하지 않음) 그런 것 같습니다. 그리고 그 프로퍼티를 다시 적용하면 스스로 수정되기도 하죠.
Safari에서는 background-attached:fixed가 제대로 작동하지 않는다는 언급이 꽤 많은데, 이것이 어떤 식으로든 관련이 있을 수도 있습니다. 하지만 그 추측들 중 어느 것도 해결책을 제공하지는 않네요 
드롭다운을 translate 없이 position:absolute로 변경하면 작동합니다. 현재 구현 방식은 제 생각엔 애초에 좀 이상합니다.
1개의 좋아요
네, 좋은 지적입니다. 항상 입력 박스 위쪽이나 아래쪽에 있어야 하는 것 아닌가요? 감지가 필요한 경우가 translate 사용을 강제하는 것일 수도 있습니다.
1개의 좋아요
이제 수정되었습니다.