# Safari에서 고급 검색 드롭다운 위치가 잘못되었습니다
**URL:** https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853
**Category:** Site feedback
**Tags:** meta-theme-feedback
**Created:** [11월 28, 2023, 3:54오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853 "2023-11-28T15:54:50Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Bas](https://meta.discourse.org/u/Bas)
#### Post date: [11월 28, 2023, 3:54오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/1 "2023-11-28T15:54:50Z")
### 설명
오른쪽 열의 고급 검색 드롭다운 메뉴가 예상했던 위치가 아니라 오른쪽 상단에 표시되고 있습니다
### 재현 방법
- Mac에서 Safari 사용
- “Meta Branded” 테마 사용
- [Search results for '' - Discourse Meta](https://meta.discourse.org/search?expanded=true) 로 이동
- 오른쪽 열의 메뉴 클릭
### 플랫폼
Mac (데스크톱)
### 브라우저
Safari
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 4, 2023, 7:11오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/3 "2023-12-04T19:11:25Z")
좋은 지적이에요. 정말 이상한 현상이네요. 오른쪽 열의 항목들에서만 이런 문제가 발생하고 있습니다. 배경 이미지를 사용하는 모든 테마에서 이런 문제가 일어나고 있어요.
```scss
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 테마에서도 같은 문제가 발생하는 것을 확인했습니다. 이 두 테마 모두 이렇게 동작하고 있네요.
---
### Author:  [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [12월 4, 2023, 7:29오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/4 "2023-12-04T19:29:54Z")
추측이지만, filter가 스택킹 컨텍스트를 변경해서 문제를 일으키는 것 같네요. jordan, 이 배경을 다른 방식으로 처리할 수 있는 방법이 있을까요?
첫 단계로 `filter`를 빼고 동작하는지 테스트해 보실 수 있을까요?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 4, 2023, 7:39오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/5 "2023-12-04T19:39:21Z")
그 방법을 시도해 보았지만 작동하지 않습니다. 제 지식으로는 `before`를 통해 첨부하는 것이 유일한 방법이며, 이렇게 해야만 페이지/스크롤에 영향이 _없게_ 됩니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [12월 4, 2023, 8:04오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/6 "2023-12-04T20:04:54Z")
와, 정말 기이한 버그네요. `absolute`는 동작하는데 `fixed`를 쓰면 깨져요. 이상하게도 `:before` 대신 `::after`를 사용하면 _이것도_ 잘 동작하네요…
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 4, 2023, 9:11오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/7 "2023-12-04T21:11:18Z")
> [@chapoi](#):
>
> 이상하게도, `:before` 대신 `::after`를 사용해도 _동일하게_ 작동하네요…
인스펙터에서 이 부분을 테스트해 보았는데, `::after`로 교체하면 배경 이미지가 숨겨집니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [12월 4, 2023, 9:12오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/8 "2023-12-04T21:12:15Z")
아, 미안합니다. 그게 해결책이라고 말하려는 건 아니었어요. 저것도 해결책은 아니고, 그 이상한 현상과 관련이 있는 다른 요소들을 지적한 것뿐이에요.
기본적으로 배경에서 이미지를 “제거”하는 모든 방법, 즉 위치 지정, after, 또는 폭을 0으로 설정하는 것 등이 드롭다운을 “수정”합니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 4, 2023, 9:16오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/9 "2023-12-04T21:16:32Z")
조프리는 이것이 사파리(Safari)의 문제일 _수 있다_고 의심했습니다. 정말 이상한 점은, 인스펙터(inspector)에서 메뉴가 화면에 _적절하게_ 배치되어야 한다고 표시된다는 것입니다. 픽셀과 수치는 모두 정확합니다.
사파리에서 메뉴 배치 설정의 “fixed” 체크를 해제한 후 다시 켜면 메뉴가 올바르게 배치되는 것을 확인할 수 있습니다.
이러한 BG(배경) 이미지 사용 사례는 2020년 이전부터 적용되어 왔기 때문에, 이것이 최근에 생긴 문제인지, 아니면 처음부터 작동하지 않던 것인지, 그리고 이것이 처음 보고되는 것인지 궁금합니다.
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [12월 5, 2023, 7:00오전 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/10 "2023-12-05T07:00:36Z")
> [@jordan.vidrine](#):
>
> 정말 이상한 점은 인스펙터에서 메뉴가 스크린에 적절히 배치되어야 _한다고_ 표시된다는 것입니다.
저도 그 문제를 겪었습니다. 전에 그런 현상을 경험해 본 적이 없어요. 마치 잘못된 뷰포트 좌표에 대해 위치를 잡고 있는 것처럼 느껴지거나(인스펙터에서 translate3d 좌표는 정확하지만 실제 위치와 일치하지 않음) 그런 것 같습니다. 그리고 그 프로퍼티를 다시 적용하면 스스로 수정되기도 하죠.
Safari에서는 `background-attached:fixed`가 제대로 작동하지 않는다는 언급이 꽤 많은데, 이것이 어떤 식으로든 관련이 있을 수도 있습니다. 하지만 그 추측들 중 어느 것도 해결책을 제공하지는 않네요 😢
드롭다운을 translate 없이 `position:absolute`로 변경하면 작동합니다. 현재 구현 방식은 제 생각엔 애초에 좀 이상합니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [12월 5, 2023, 4:20오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/11 "2023-12-05T16:20:08Z")
> [@chapoi](#):
>
> `position:absolute`로 변경하고 translate를 쓰지 않으면 작동합니다. 현재 구현 방식은 제 생각에 좀 이상합니다.
네, 좋은 지적입니다. 항상 입력 박스 위쪽이나 아래쪽에 있어야 하는 것 아닌가요? 감지가 필요한 경우가 translate 사용을 강제하는 것일 수도 있습니다.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [1월 24, 2024, 9:33오후 UTC](https://meta.discourse.org/t/advanced-search-dropdowns-are-misplaced-in-safari/286853/21 "2024-01-24T21:33:29Z")
이제 수정되었습니다.