Neues Update hat meine obere Navigationsleiste kaputt gemacht

Unterstützung
1

Ein kürzlich durchgeführtes Update hat meine obere Navigationsleiste beschädigt – genauer gesagt: Die Leiste wird zwar geladen (sie ist für einen Bruchteil einer Sekunde sichtbar), aber danach legt sich der Standard-Header von Discourse darüber und verdeckt sie.

Ich versuche herauszufinden, was genau passiert ist und/oder wie man es beheben kann. Könnte mir jemand die richtige Richtung aufzeigen?

Durch die Inspektion der Seite im Browser habe ich festgestellt, dass die Einstellung

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

den Header nach unten verschiebt, sodass die Navigationsleiste (die 48px hoch ist) sichtbar wird. Das scheint das Problem behoben zu haben.

Ich bin mir jedoch nicht sicher, ob dies eine nachhaltige Lösung ist, und ich bin auch weiterhin neugierig darauf zu erfahren, was genau passiert ist.

Außerdem musste ich

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

aus meiner Komponente entfernen, um den zusätzlichen weißen Raum unter dem Header zu beseitigen. Dieser Code hat jahrelang einwandfrei funktioniert, daher bin ich neugierig, was dazu geführt hat, dass er nicht mehr funktioniert…

Ich habe auch etwas anderes entfernt, wie zum Beispiel

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

, da es keinen Unterschied zu machen schien.

Edit: Das oben Gesagte gilt für das Desktop-CSS. Auf mobilen Geräten musste ich den Z-Wert der Navigationsleiste nicht erhöhen.

2

Der Header hat sich von position: fixed zu position: sticky geändert (REFACTOR: Remove position fixed from the header and use sticky instea… · discourse/discourse@da5841d · GitHub) – dies ist eine der Änderungen, die wir dank der Aufgabe der Unterstützung für IE11 vornehmen konnten.

Die Änderung behebt einige kleinere Probleme, die wir mit dem Header seit der Existenz von Discourse hatten. Funktional bedeutet dies, dass der Header nun Teil des natürlichen Flusses der Elemente auf der Seite ist, anstatt eine feste Position einzunehmen (und unabhängig von der Position anderer Elemente auf der Seite zu sein). Deshalb sind der Padding- und Margin-Wert für den Hauptauslass nicht mehr erforderlich.

Als die Änderung ursprünglich vorgenommen wurde, gab es im Standard-CSS auf mobilen Geräten etwas zusätzlichen Padding, was jedoch ein oder zwei Tage später behoben wurde. Ich vermute, Sie haben an dem Tag zwischen der ursprünglichen Änderung und der Korrektur aktualisiert. Wenn Sie erneut aktualisieren, sollte das Problem verschwinden (alternativ können Sie .mobile-view #main-outlet { padding-top: 0.25em; } hinzufügen, falls Sie nicht erneut aktualisieren möchten).

Ihre Lösung mit .d-header-wrap erscheint mir nachhaltig.

3

Siehe auch Header Submenus - #103 by Mark_Schmucker. Ich bin mir nicht sicher, ob der vorgeschlagene nachhaltige Fix darauf zutrifft, aber ich denke, sie beziehen sich auf dieselbe Änderung.

4

Ich habe nach vielen Monaten der Vernachlässigung gerade auf die neueste Version (2.8.0.beta4) aktualisiert, und es scheint, als wäre meine Lösung nicht so nachhaltig gewesen (oder vielleicht hat das aktuelle Problem nichts mit dieser Lösung zu tun). Ich arbeite derzeit daran, herauszufinden, was passiert ist, und werde mich hier melden, sobald ich es weiß. Falls das Folgende jemandem einen Hinweis gibt, lass es mich bitte wissen.

Grundsätzlich ist das Gleiche passiert, wie im Eröffnungspost beschrieben, nur dass diesmal nicht der Discourse-Header die obere Navigationsleiste überdeckt sondern die obere Navigationsleiste den Discourse-Header . (Bearbeitung: Ich glaube jetzt, dass der Header nicht überdeckt wird, sondern gar nicht gerendert wird). Wenn ich das Standardthema über den abgesicherten Modus deaktiviere, wird alles ordnungsgemäß angezeigt.

Seltsamerweise werden jedoch sowohl der Discourse-Header als auch die obere Navigationsleiste beim Navigieren zu /admin/customize/themes/11/desktop/scss/edit korrekt angezeigt (sowohl im abgesicherten als auch im normalen Modus). Ich vermute, dass es keinen Unterschied zwischen dem abgesicherten und dem normalen Modus auf der Themenseite gibt, weil der abgesicherte Modus auf einige Admin-Seiten keine Anwendung findet. Was ich jedoch nicht verstehe, ist, warum auf den Admin-Seiten alles korrekt angezeigt wird, aber sonst nicht.

Eine weitere Sache, die ich nicht verstehe: Wenn ich die Seite auf meinem Mobilgerät aufrufe, wird sie ebenfalls korrekt angezeigt, selbst wenn ich explizit die Desktop-Version anfordere…

Ich werde weiter recherchieren, wäre aber für jegliche Hinweise hier dankbar.

Bearbeitung: Hier ist, was ich sehe, wenn ich eine öffentliche Seite (im normalen Modus) inspiziere:

image
image1368×384 32.9 KB

Und hier ist, was ich sehe, wenn ich eine Admin-Seite (im normalen Modus) inspiziere:

image
image1394×380 32.9 KB

Wie du siehst, ist meine CSS-Lösung in beiden Fällen vorhanden, aber nur der zweite Fall rendert die Seite korrekt…

5

OK, ich glaube, ich habe es behoben. Der verschwindende Header stand nicht im Zusammenhang mit meiner Korrektur, sondern wurde durch diese Theme-Komponente verursacht:

Das Entfernen hat das Problem gelöst. Vielleicht versteht @Johani, was dies verursacht? Vielleicht hängt es mit dem

Zusätzliche Steuerung von iframes in Oneboxes

zusammen, das in Discourse Version 2.6 - #2 by neil eingeführt wurde?