最近のアップデートでトップナビゲーションバーが壊れました

サポート
1

最近のアップグレードにより、トップナビゲーションバーに問題が発生しました。具体的には、バーは読み込まれる（一瞬表示される）ものの、その後標準的な Discourse ヘッダーがその上に重なり、バーを隠してしまいます。

何が起きたのか、あるいはどのように修正すればよいかを調べています。どなたか方向性を示していただけないでしょうか。

ブラウザでページを検証したところ、以下の CSS を設定することでヘッダーを下げ、ナビゲーションバー（48px 高）を表示させることができることがわかりました。これで問題は解決したようです。

.d-header-wrap {
    margin-top: 48px;
}

しかし、これが持続可能な解決策かどうかは確信が持てません。また、実際に何が起きたのかについてもまだ知りたいと思っています。

また、ヘッダーの下に追加された余白を削除するために、以下のコードをコンポーネントから削除する必要がありました。このコードは長年問題なく動作していたため、何が原因で動作しなくなったのか気になります。

#main-outlet { margin-top: 48px; padding-top: 75px;}

さらに、効果がないように思えた以下のコードも削除しました。

#main-outlet.docked {
    margin-top: 0px;
    padding-top: 123px
}

編集：上記はデスクトップ CSS の場合です。モバイルでは、ナビゲーションバーの Z 値を上げる必要はありませんでした。

「いいね！」 2
2

ヘッダーは position: fixed から position: sticky に変更されました（https://github.com/discourse/discourse/commit/da5841de0b2b60ceaa2f2602d7231e7393a74e66）。これは、IE11 のサポートを廃止できたことで実現できたアップデートの一つです。

この変更により、Discourse が存在して以来抱えていたヘッダーに関するいくつかの小さな問題が改善されました。機能的には、ヘッダーが他のページ要素の位置とは無関係に固定位置にあるのではなく、ページ上の要素の自然なフローの一部として扱われるようになりました。そのため、メインアウトレットの余白（padding）とマージン（margin）はもはや必要なくなっています。

変更が当初行われた際、デフォルトの CSS にはモバイル端末で余分なパディングが含まれていましたが、1〜2 日後に修正されました。おそらく、初期変更と修正の間の日にアップデートされたのでしょう。再度アップデートすれば問題は解消するはずです（あるいは、再度アップデートしたくない場合は .mobile-view #main-outlet { padding-top: 0.25em; } を追加することもできます）。

.d-header-wrap によるあなたの修正は、持続可能だと考えられます。

「いいね！」 5
3

詳細は Header Submenus - #103 by Mark_Schmucker もご覧ください。提案された永続的な修正がそれにも適用されるかどうかは確信が持てませんが、同じ変更に関連していると思います。

「いいね！」 1
4

数ヶ月放置した後、最新バージョン（2.8.0.beta4）にアップグレードしたところ、私の修正が持続可能ではなかったようです（あるいは、現在の問題はこの修正とは無関係かもしれません）。現在何が起きたのかを調べており、判明次第ここに更新しますが、もし以下の内容で心当たりがある方がいらっしゃれば、お知らせください。

基本的には OP で説明された現象と同じですが、今回は Discourse ヘッダーがトップナビゲーションバーを覆うのではなく、トップナビゲーションバーが Discourse ヘッダーを覆うという状況でした。（編集：ヘッダーが覆われているのではなく、まったく描画されていないと考えるようになりました）。デフォルトテーマをセーフモードで無効化すると、正しく表示されます。

奇妙なことに、/admin/customize/themes/11/desktop/scss/edit に移動すると、Discourse ヘッダーとトップナビゲーションバーの両方が正しく表示されます（セーフモードでも通常モードでも）。テーマページでセーフモードと通常モードに違いがない理由は、セーフモードが一部の管理ページには適用されないためだと考えられます。しかし、なぜ管理ページでは正しく表示されるのに、それ以外では表示されないのかが理解できません。

もう一つ理解できない点があります。モバイルでサイトにアクセスすると、デスクトップ版を明示的にリクエストした場合でも正しく表示されます。

さらに調査しますが、何かヒントがあればご教示ください。

編集：通常モードで公開ページを検証した際の画面です：

image
image1368×384 32.9 KB

通常モードで管理ページを検証した際の画面です：

image
image1394×380 32.9 KB

ご覧の通り、CSS 修正は両方のケースで存在していますが、ページが正しく描画されているのは 2 番目のケースのみです。

5

OK、修正したと思います。ヘッダーが消える問題は私の修正とは関係なく、このテーマコンポーネントが原因でした：

これを削除することで問題が解決しました。@Johani さんはこれが何によるものか理解されているでしょうか？もしかすると、Discourse Version 2.6 - #2 by neil で導入された「Onebox 内の iframe に関する追加制御」と関連しているかもしれません。