# 페이지 너비로 인해 검색/사용자/햄버거 콤보박스 접근 시 페이지 상단으로 자동 스크롤됨 (크롬만 해당)
**URL:** https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459
**Category:** Support
**Created:** [10월 28, 2021, 9:31오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459 "2021-10-28T21:31:25Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:31오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/1 "2021-10-28T21:31:25Z")
community.home-assistant.io를 Chrome 버전 95.0.4638.54 (공식 빌드) (64비트)로 사용 중입니다. 홈 데스크톱에서만 나타나는 이상한 문제가 있습니다. 업무용 데스크톱은 문제가 없어 보이지만, 현재 Chrome 버전은 정확히 알지 못합니다.
문제 내용:
검색, 햄버거 메뉴(세로로 세 줄), 또는 사용자 아이콘을 클릭하면 콤보박스가 표시되는 대신 현재 스크롤바의 맨 위로 자동으로 스크롤됩니다.
이 문제는 콤보박스가 화면 오른쪽에서 분리되어 콤보박스와 세로 스크롤바 사이에 간격이 생길 때만 발생합니다. 세로 스크롤바를 포함하여 x축 기준 약 1350픽셀 부근에서 발생하는 것으로 보입니다.
수정: 콤보박스가 분리된 상태에서 나타나는 유일한 경우는 페이지 맨 위(1페이지)에 있을 때입니다:
3픽셀만 줄이면…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 28, 2021, 9:34오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/2 "2021-10-28T21:34:41Z")
여기서나 try.discourse.org에서 재현할 수 없다면, 거의 확실히 CSS 테마와 레이아웃 관련 문제입니다. 또한 안전 모드에서도 시도해 보세요.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:38오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/3 "2021-10-28T21:38:01Z")
여기서도 그런 일이 벌어져.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:40오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/4 "2021-10-28T21:40:18Z")
안전 모드에서도 발생함
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 28, 2021, 9:44오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/5 "2021-10-28T21:44:08Z")
이 문제를 재현하는 데 어려움을 겪고 있습니다. 구체적인 단계는 무엇인가요? 제 브라우저가 매우 넓고, 이 주제에서 아래로 스크롤한 상태에서 아바타를 클릭해도 맨 위로 스크롤되지 않아요?
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:47오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/6 "2021-10-28T21:47:36Z")
사실 별거 없습니다. 브라우저 창을 넓히면 됩니다. 참고로 같은 PC에서 Edge에서는 이런 문제가 발생하지 않습니다. Chrome에서만 발생합니다.
안전 모드에서 개발자 도구를 열면 빈 결과가 나오며, 관련이 있을 수도 있고 없을 수도 있는 메시지가 하나 표시됩니다:
> [@](#):
>
> 페이지 또는 스크립트가 `navigator.userAgent`, `navigator.appVersion`, `navigator.platform` 중 적어도 하나에 접근하고 있습니다. Chrome 101부터 User Agent 문자열에 포함된 정보의 양이 줄어들 예정입니다.
>
> 이 문제를 해결하려면 `navigator.userAgent`, `navigator.appVersion`, `navigator.platform` 사용법을 기능 감지(feature detection), 점진적 향상(progressive enhancement)으로 대체하거나 `navigator.userAgentData`로 마이그레이션하세요.
>
> 성능상의 이유로 해당 속성에 대한 첫 번째 접근만 표시됩니다.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 28, 2021, 9:51오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/7 "2021-10-28T21:51:54Z")
브라우저 확장 프로그램이 있으신가요? 시크릿 창에서 시도해 보실 수 있나요?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 28, 2021, 9:53오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/8 "2021-10-28T21:53:15Z")
최소 한 명이 이 문제를 재현할 수 있을 때까지 지원 카테고리로 재분류합니다. 저는 분명히 재현할 수 없으며, Chrome/Windows를 사용하고 있습니다.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:54오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/9 "2021-10-28T21:54:13Z")
비공개 모드에서도 발생해요.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:56오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/10 "2021-10-28T21:56:14Z")
참고로 2.8.0.beta7을 실행 중입니다.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 28, 2021, 9:59오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/11 "2021-10-28T21:59:38Z")
마지막으로 한 가지 더 알려드릴 것은, 이 문제는 100% 예약된 Windows 업데이트와 재부팅 이후에 시작되었습니다. 운영체제는 Windows 10 Pro이며, OS 빌드는 19042.1288, 경험 버전은 120.2212.3920.0입니다.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [10월 28, 2021, 10:40오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/12 "2021-10-28T22:40:08Z")
Windows / Chrome도 최신 상태입니다
창 크기를 여러 가지 방식으로 조절해 봤는데, 이 문제를 재현할 수가 없네요..
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 29, 2021, 1:02오전 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/13 "2021-10-29T01:02:14Z")
개발 서버를 설정할 수 있는 링크가 있나요? 문제를 디버깅할 수 있도록요. 보통 VS Code나 Visual Studio로 설정하나요?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [10월 29, 2021, 11:22오전 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/14 "2021-10-29T11:22:58Z")
다른 사용자도 동일한 문제를 보고했습니다.
버전 95.0.4638.54 (공식 빌드) (64비트)
해당 사용자도 키보드 단축키를 사용해 보았으나, 문제는 동일했습니다.
---
### Author:  [@thanasis](https://meta.discourse.org/u/thanasis)
#### Post date: [10월 29, 2021, 3:26오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/15 "2021-10-29T15:26:58Z")
크롬에서도 동일한 현상이 확인되지만 파이어폭스에서는 그렇지 않습니다.
---
### Author:  [@pettro](https://meta.discourse.org/u/pettro)
#### Post date: [10월 31, 2021, 12:38오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/16 "2021-10-31T12:38:52Z")
무엇이든 시도해 볼 의향이 있고, 수년째 개발을 하고 있습니다. 이 버그는 정말이지 미칠 것 같을 정도로 짜증나는데, 재현이 불가능한 상황이라 이 문제의 근본 원인을 찾는 데 도움이 될 방향이나 링크, 뭐든 환영합니다.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [11월 5, 2021, 4:48오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/17 "2021-11-05T16:48:14Z")
오늘 데스크톱에서 Chrome을 업데이트한 후 이 문제가 발생하기 시작했습니다. 이 PR으로 문제가 해결될 것입니다.
>
>
> Context:
>
> https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-t…he-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459
>
> When one of the header panels is opened, there's some logic to set the focus either on the first link - in the case of the hamburger and user menus - or the search bar in the case of the search panel.
>
> Hamburger
>
> https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L497
>
> User menu
>
> https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L487
>
> Search panel
>
> https://github.com/discourse/discourse/blob/1f8939c0f130892397fb7ee8b0f348f2a7f8b636/app/assets/javascripts/discourse/app/widgets/header.js#L627
>
> When \`focus()\` is called, the browser automatically scrolls to that element. This wouldn't normally be an issue; however, since the header is set to sticky, it causes problems on Chrome specifically. Here's what it looks like
>
> https://d11a6trkgmumsb.cloudfront.net/original/3X/1/e/1e5cafe12de556ba09f13c42cd74f1f38c873868.mp4
>
> and it's even more prominent on topic pages since it tries to find the top of the page, causing more posts to load, which causes the height to change, which causes jitter.
>
> This PR adds the \[preventScroll\](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focus\_with\_focusoption) option to \`focus()\` to prevent this automatic scrolling
>
> Here's what it looks like after
>
> https://d11a6trkgmumsb.cloudfront.net/original/3X/8/e/8e475f7b3a4cd7151fa034343e88c4ab4d09cb11.mp4
PR 설명에 더 자세한 내용이 있습니다. 수정이 이제 Meta에서 적용되었습니다.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [11월 6, 2021, 12:12오후 UTC](https://meta.discourse.org/t/width-of-page-causes-an-autoscroll-to-the-top-of-the-page-when-accessing-serach-user-hamburger-comboboxes-chrome-only/207459/18 "2021-11-06T12:12:42Z")
이 문제에 대해 조금 더 조사한 끝에 원인을 파악했습니다. 이 버그와 CSS sticky와 관련된 몇 가지 다른 버그는 Chrome 플래그에서
`Experimental Web Platform features`
가 활성화된 경우에만 발생합니다. 같은 Chrome 버전을 사용하는데도 일부 사용자만 이 문제를 겪은 이유를 설명해 줍니다.
이 문제를 겪고 있다면, 아래에서 해당 기능이 비활성화되어 있는지 확인하세요.
`chrome://flags/#enable-experimental-web-platform-features`
더 이상 필요하지 않으므로, 위의 변경 사항을 되돌리는 PR을 제출했습니다.