Width of page causes an autoscroll to the top of the page when accessing serach/user/hamburger comboboxes (chrome only)

support
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.

2021-10-28_17-29-14

EDIT: The only way it will appear when the combobox is detached is when you’re at the top of the page (Post 1):

image
image1348×976 98.5 KB

3 pixels less…

2021-10-28_17-30-50

2

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 Like
3

happens here too.

2021-10-28_17-37-26

1 Like
4

Also happens in safe mode

5

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?

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:

7

Do you have any browser extensions? Can you try in an incognito window?

1 Like
8

Recategorizing as support until at least one other person can repro this. I definitely can’t, and I am on Chrome/Windows.

9

Happens in incognito as well.

10

FYI, running the 2.8.0.beta7

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.

12

I’m up to date on Windows / Chrome as well

image
image1746×482 41.2 KB

I have sized the window so many different ways and I can’t repro this…

13

You have links to setup a development server where I can debug into the issue? Is it typically setup through vscode or vs?

14

We had someone reporting the same.
Version 95.0.4638.54 (Offizieller Build) (64-Bit)
He also tried to use the keyboard shortcuts, but the problem was the same.

15

I’m also seeing the same behaviour in Chrome but not Firefox

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.

17

I updated Chrome on my desktop today and started seeing this issue. This should fix it.

There’s more details in the PR description. The fix is now live on Meta.

6 Likes
18

I read a little bit more about this and managed to track down the issue. This bug - and a few other bugs relating to CSS sticky - will only occur if you have

Experimental Web Platform features

enabled in Chrome flags. This explains why only some people were getting it even though it’s the same version of Chrome.

If you’re seeing this issue. Make sure that it’s disabled here.

chrome://flags/#enable-experimental-web-platform-features

I sent a PR to revert the change above because it’s no longer necessary.

4 Likes