DiscourseHub 上的网站与 iPhone 14 Pro Max 的顶部栏元素冲突

[Stephen]

Safari 上的网站没问题：

而通过 DiscourseHub 访问的相同网站则在屏幕顶部发生冲突：

正在测试浅色和聚焦侧边栏主题。

由于它们这样重叠，网站顶部的任何内容都很难激活。

iPhone 14 Pro Max，iOS 16.0.1（当前零售版）。

[spdegabrielle (Stephen De Gabrielle)]

我刚刚在 Titlebar is not displaying properly - #13 by spdegabrielle 上发表了评论，但现在我看到了你的帖子，我认为它们可能有关联。

[Stephen]

我也参与了那个，它更多地与聚焦侧边栏主题有关。这个是硬件特定的。因此，我上面的一张截图同时展示了两者。

[david (David Taylor)]

感谢 @Stephen - 我们正在准备一个修复程序，发布后会在此处更新

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

[seanblue]

很难说，但这和我在这里看到的 https://community.wanikani.com/ 一样吗？区别在于，我在桌面和移动浏览器上都看到了这个（我不使用 DiscourseHub），所以我不确定。

[Don]

我认为这是因为在 logo 上使用了 height: 100%。

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

也许应该在核心的 #site-logo 中添加 max-height: var(--header-offset) 以防止这种情况。

快速修复

从您的自定义主题中删除这些

来自桌面 theme_1

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

以及来自移动设备 theme_1

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

添加到您的自定义主题中

添加到通用部分

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

添加到桌面

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

添加到移动设备部分

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

进行这些更改后

桌面:

移动设备:

[seanblue]

谢谢你的建议。不幸的是，我不是该网站的管理员，所以我无能为力。

[Stephen]

Discourse Hub 更新已在 iOS App Store 上架，一切又恢复正常了。

[darkpixlz (Pyx)]

我认为这可能是 iOS 16？我看到你正在使用它，今天我在 Roblox 上遇到了这个问题。

[cvx (Jarek Radosz)]

Discourse Hub 1.8.3 已发布，支持 iPhone 14 Pro！

请告知是否有论坛标题与 iOS 界面之间存在更多冲突。 (不只是在最新的 iPhone 上)

[Stephen]

是六天前的发布，还是另一个？

[cvx (Jarek Radosz)]

是的，就是那个！