Sites über DiscourseHub stoßen mit oberem Balken-Elementen auf dem iPhone 14 Pro Max zusammen

[Stephen]

Websites über Safari sind in Ordnung:

Während dieselben Websites über DiscourseHub am oberen Bildschirmrand kollidieren:

Testen beider Light- und Focused Sidebar-Themes.

Es ist ziemlich schwierig, etwas in der oberen Leiste der Website zu aktivieren, während sie sich so überlappen.

iPhone 14 Pro Max, iOS 16.0.1 (aktuelle Retail-Version).

[spdegabrielle (Stephen De Gabrielle)]

Ich habe gerade einen Kommentar auf Titlebar is not displaying properly - #13 by spdegabrielle hinterlassen, aber jetzt sehe ich deinen Beitrag und denke, sie könnten zusammenhängen.

[Stephen]

Ich habe auch daran teilgenommen, es bezieht sich mehr auf das Focused Sidebar-Theme. Dieses hier ist spezifisch für die Hardware. Daher zeigt einer meiner obigen Screenshots beides.

[david (David Taylor)]

Danke @Stephen – wir haben eine Korrektur dafür in der Pipeline und werden hier aktualisieren, sobald sie veröffentlicht wird.

FIX: Update react-native-device-info (#129)

[seanblue]

Es ist schwer zu sagen, aber ist das dasselbe wie das, was ich hier auf https://community.wanikani.com sehe? Der Unterschied ist, dass ich dies sowohl auf Desktop- als auch auf Mobilbrowsern sehe (ich benutze DiscourseHub nicht), daher war ich mir nicht sicher.

[Don]

Ich glaube, das liegt daran, dass height: 100% für das Logo verwendet wird.

.d-header {
  #site-logo.logo-big {
    height: 100%;
  }
}

Wahrscheinlich eine gute Idee, dem Kern #site-logo max-height: var(--header-offset) hinzuzufügen, um dies zu verhindern.

Schnelle Lösung

Entfernen Sie diese aus Ihrem benutzerdefinierten Theme

Vom Desktop theme_1

.d-header {
  #site-logo.logo-big {
    height: 100%;
  }
}

Und vom Mobilgerät theme_1

.d-header {
  #site-logo {
    height: 100%;
    max-height: 100%;
  }
}

Fügen Sie diese zu Ihrem benutzerdefinierten Theme hinzu

Fügen Sie dies zu Common hinzu

.d-header {
  #site-logo {
    height: 100%;
    max-height: var(--header-offset);
  }
}

Fügen Sie dies zum Desktop hinzu

.d-header {
  #site-logo.logo-small {
    height: 2.667em;
  }
}

Fügen Sie dies zum Mobilgerätebereich hinzu

.d-header {
  .title {
    max-width: 100%;
    #site-logo.logo-small {
      max-height: 2.4em;
    }
  }
}

Nach diesen Änderungen

Desktop:

Mobilgerät:

[seanblue]

Danke für den Vorschlag. Leider bin ich kein Administrator für die Website, daher kann ich nicht viel tun.

[Stephen]

Das Discourse Hub-Update ist im iOS App Store erschienen und alles sieht wieder gut aus.

[darkpixlz (Pyx)]

Ich glaube, das könnte iOS 16 sein? Ich sehe, dass du es benutzt, und ich hatte dieses Problem heute bei Roblox.

[cvx (Jarek Radosz)]

iPhone 14 Pro-Kompatibilität wurde in Discourse Hub 1.8.3 veröffentlicht!

Lass mich wissen, ob es weitere Kollisionen zwischen dem Forum-Header und der iOS-Oberfläche gibt. (nicht nur auf dem neuesten iPhone)

[Stephen]

Ist das die Veröffentlichung von vor sechs Tagen oder eine andere?

[cvx (Jarek Radosz)]

Ja, das ist das eine!