pettro
2021 年10 月 28 日 21:31
1
Using community.home-assistant.io w/ chrome Version 95.0.4638.54 (Official Build) (64-bit). Having an odd issue, only present on my home desktop. Work desktop appears to be fine, however I don’t know the current chrome version.
This issue:
Clicking on search, hamburger (3 vertical lines), or your user icon, the page auto scrolls to the top of the current scrollbar instead of exposing the combobox.
The issue only occurs when the combobox detaches from the right side of the screen so that there would be a gap between the combobox and the vertical scroll bar. This appears to be somewhere around 1350 pixels in x including the vertical scroll bar.
EDIT: The only way it will appear when the combobox is detached is when you’re at the top of the page (Post 1):
3 pixels less…
Unless you can repro it here, or on try.discourse.org , almost certainly an issue with your CSS theming and layout. Also try in safe mode .
1 个赞
pettro
2021 年10 月 28 日 21:40
4
Also happens in safe mode
I am having trouble reproducing this, what are the specific steps? I have a super wide browser, I am scrolled down in this topic and I am clicking on the avatar and it isn’t scrolling to top?
pettro
2021 年10 月 28 日 21:47
6
There’s really not much to it. Just widen your browser. For what it’s worth, this is not happening in Edge on the same PC. Only chrome.
Dev tools in safemode turn up empty outside message that may or may not be related:
A page or script is accessing at least one of navigator.userAgent , navigator.appVersion , and navigator.platform . Starting in Chrome 101, the amount of information available in the User Agent string will be reduced.
To fix this issue, replace the usage of navigator.userAgent , navigator.appVersion , and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData .
Note that for performance reasons, only the first access to one of the properties is shown.
Johani
2021 年10 月 28 日 21:51
7
Do you have any browser extensions? Can you try in an incognito window?
1 个赞
Recategorizing as support until at least one other person can repro this. I definitely can’t, and I am on Chrome/Windows.
pettro
2021 年10 月 28 日 21:54
9
Happens in incognito as well.
pettro
2021 年10 月 28 日 21:56
10
FYI, running the 2.8.0.beta7
pettro
2021 年10 月 28 日 21:59
11
Other last bit of info, this 100% started after a scheduled windows update and reboot. On win10Pro OS Build 19042.1288 Experience 120.2212.3920.0.
I’m up to date on Windows / Chrome as well
I have sized the window so many different ways and I can’t repro this…
pettro
2021 年10 月 29 日 01:02
13
You have links to setup a development server where I can debug into the issue? Is it typically setup through vscode or vs?
Moin
2021 年10 月 29 日 11:22
14
We had someone reporting the same.
I’m also seeing the same behaviour in Chrome but not Firefox
pettro
2021 年10 月 31 日 12:38
16
I’m willing to try anything and I’ve been developing for years now. This bug is annoying the crap out of me, any direction/link/whatever towards finding the root cause of this issue would be welcomed seeing that you can’t reproduce it.
Johani
2021 年11 月 5 日 16:48
17
I updated Chrome on my desktop today and started seeing this issue. This should fix it.
discourse:main ← hnb-ku:fix-dropdown-scroll
opened 02:51AM - 05 Nov 21 UTC
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
There’s more details in the PR description. The fix is now live on Meta.
6 个赞
Johani
2021 年11 月 6 日 12:12
18
我对此进行了更多了解，并设法追踪到了问题。这个 bug——以及其他几个与 CSS sticky 相关的 bug——只有在 Chrome 标志中启用了“实验性 Web 平台功能”时才会出现。这解释了为什么只有一部分人遇到了这个问题，尽管他们使用的是相同版本的 Chrome。
如果你遇到了这个问题，请确保在此处禁用它：
chrome://flags/#enable-experimental-web-platform-features
我已经发送了一个 PR 来撤销上述更改，因为它不再是必需的。
4 个赞
