幅が原因で、serach/user/hamburgerコンボボックスにアクセスするとページ上部に自動スクロールします(Chromeのみ)

community.home-assistant.io を Chrome バージョン 95.0.4638.54(公式ビルド)(64 ビット)で利用しています。奇妙な問題が発生しており、自宅のデスクトップでのみ現れます。職場のデスクトップでは問題なさそうですが、現在の Chrome バージョンは不明です。

この問題:

検索、ハンバーガーメニュー(縦に並んだ 3 本の線)、またはユーザーアイコンをクリックすると、ページが現在のスクロールバーの最上部に自動的にスクロールしてしまい、コンボボックスが表示されません。

この問題は、コンボボックスが画面の右側から離れ、コンボボックスと垂直スクロールバーの間に隙間ができる場合にのみ発生します。これは、垂直スクロールバーを含めて X 軸方向で約 1350 ピクセル付近のようです。

2021-10-28_17-29-14

編集: コンボボックスが離れている状態で表示されるのは、ページ上部(投稿 1)にいる場合のみです。

3 ピクセル少ないと…

2021-10-28_17-30-50

ここで、または try.discourse.org で再現できない限り、おそらく CSS テーマやレイアウトに関する問題です。セーフモードでもお試しください。

ここでも同じことが起こります。

2021-10-28_17-37-26

セーフモードでも発生します

再現が難しいのですが、具体的な手順を教えていただけますか?私は超広めのブラウザを使用しており、このトピックをスクロールした状態でアバターをクリックしても、トップにスクロールされません。

実はそれほど複雑ではありません。ブラウザのウィンドウを広くするだけです。参考までに、同じ PC 上の Edge ではこの問題は発生していません。Chrome のみです。

セーフモードで開発者ツールを確認しても、以下のメッセージ以外は何も表示されません。このメッセージは関連する可能性もありますが、そうでない可能性もあります。

ブラウザ拡張機能はインストールしていますか?シークレットウィンドウで試してみられますか?

再現者が少なくとも一人現れるまで、サポートカテゴリに再分類します。私自身は再現できず、環境は Chrome/Windows です。

シークレットモードでも発生します。

参考情報:2.8.0.beta7 を実行しています

さらに、この問題は 100% 予定された Windows の更新と再起動後に発生しました。OS は Windows 10 Pro、ビルド番号 19042.1288、エクスペリエンス バージョン 120.2212.3920.0 です。

Windows と Chrome も最新バージョンに更新済みです

ウィンドウサイズを何度も変えて試しましたが、この現象を再現できません。

開発サーバーをセットアップするためのリンクはありますか?問題のデバッグに使用できますか?通常は VS Code または Visual Studio でセットアップするものですか?

同じ現象を報告した方がいらっしゃいます。
バージョン 95.0.4638.54 (公式ビルド) (64 ビット)
キーボードショートカットを試してみましたが、問題は同じでした。

Chrome でも同じ動作が見られますが、Firefox では見られません。

何でも試す用意がありますし、何年も開発を続けています。このバグに本当にイライラしています。再現できない状況ではございますが、問題の根本原因を特定するための方向性やリンク、あるいはどのような情報でも大歓迎です。

デスクトップの Chrome を今日更新したところ、この問題が発生しました。これで解決するはずです。

詳細は PR の説明をご覧ください。修正はすでに Meta で公開されています。

少し詳しく調べて、問題の原因を特定しました。このバグ(CSS の sticky に関連する他のいくつかのバグも含む)は、Chrome のフラグで「Experimental Web Platform features」が有効になっている場合のみ発生します。これが、Chrome のバージョンが同じでも一部の人のみで問題が発生していた理由です。

もしこの問題が発生している場合は、以下の場所で無効になっているか確認してください。

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

上記の変更はもはや不要なため、元に戻すための PR を送信しました。