是否有任何解决方法可以避免 SFSafariViewController 隐藏固定位置的标题？答案

【问题标题】：Are there any workaround to avoid SFSafariViewController from hiding fixed position headers?是否有任何解决方法可以避免 SFSafariViewController 隐藏固定位置的标题？
【发布时间】：2018-10-17 06:19:20
【问题描述】：

SFSafariViewController 有这个在 Safari 中无法重现的错误。

它通常会遮盖站点名称/完成 chrome 后面的固定面板的顶部。

发生这种情况的原因是它在内部失去了页面实际高度和缩小的页眉镶边大小之间的同步。

不错的小标题

坏的小标题（SF chrome应该很小但很大）

不错的大标题

此问题已在其他地方报告：https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-behind-safari-navigation-controls-when-vi，并且是 iOS 9 及更高版本中的一个问题（在 12.0.1 中仍然是一个问题）

要重现使用 SFViewController 制作一个虚拟应用程序并导航到具有固定标题的站点，例如 bbs.boingboing.net，然后单击并浏览一些主题。

由于这个错误现在已经存在几年了，我想知道是否有某种解决方法不涉及在标题顶部添加一般填充？

最少的复制

用这个 HTML 创建一个页面

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        height: 2000px;
        background-color: green;
      }
      header {
        width: 100%;
        height: 50px;
        background-color: red;
        color: white;
        position: fixed;
        top: 0;
      }
    </style>
  </head>
  <body>
    <header>Hello</header>
  </body>
</html>

在 SafariViewController 中打开（在线托管，然后通过电子邮件发送链接，iOS 中的 gmail 应用程序使用 Safari 视图控制器，Discourse 应用程序也是如此）

快速滚动到底部

一半的标题隐藏。

insets 没有区别 inset 顶部为 0，cover viewport 属性没有区别。

【问题讨论】：

向 Apple 报告的问题 #45354159
能否提供您正在使用的网站网址（如果可能）？
当然，bbs.boingboing.net 可以解决问题
您是否有权访问要嵌入 Safari 视图的网站的前端开发人员？
iOS safari 是新的 IE

标签： ios iphone sfsafariviewcontroller

【解决方案1】：

- 问题

在不同环境下测试表明该问题仅出现在SFSafariView中，原始safari应用没有被感染。并且只有当用户在页面末尾丰富并再次滚动时，它才会出现在带有刘海的纵向模式下的iPhone中；所以页面应该会上升，导航栏会自动再次出现，并且会发生冲突。

iPhone 8 - 页面底部 - 纵向 (OK)

iPhone XR - 页面底部 - 纵向（不行）

iPhone XR - 页面底部 - 纵向 (OK)

iPad Pro 9.7 - 页面底部 - 横向 (OK)

在某些情况下，这可能不是SFSafaryViewController 的错误。

因此，如果您有权访问要嵌入到 SFSafaryViewController 的网站的前端开发人员，请向他们介绍以下内容：

- 安全区域插图

因此，为了解决这个问题，Apple 实施了新的 safe-area-inset、预定义的 4 个常量集和一个名为 constant() 的新 CSS 函数。安全区预定义常量如下：safe-area-inset-top、safe-area-inset-right、safe-area-inset-bottom和save-area-inset-left。当您组合所有这四个常量时，您可以参考每一侧的安全区域插图的当前大小。 constant() 在任何地方都可以使用 var()。

有很多网站向您展示如何将网页应用到 iPhone X。Here's one of them。

也许他们可以尝试将 div 放在可滚动部分之外，并固定位置。所以如果你有一个滚动的代码：

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

这样div滚动容器中的任何元素，它都会滚动。

如果他们把它放在可滚动部分之外：

<div id="scroll-container">
<div>
<div id="not-scrollable">
</div>

并输入position:fixed;或position:absolute；或position: sticky 或device-fixed；或等在 #not-scrollable 的 css 中，它不应该滚动。

因此，如果您无权访问要嵌入到 SFSafaryViewController 的网站的前端开发人员，请尝试以下操作（不推荐）：
- 尝试转动 barCollapsing safaryViewController.configuration.barCollapsingEnabled = false
- 或尝试将其嵌入到导航控制器中并摆脱 SFView 的标题
- 或使用使用控制器而不是 SFSafaryViewController 实现全屏 WKWebView。

注意（对于那些乱用工具栏的人）

您可以使用委托方法来确定网页的加载和加载状态并启用/禁用它以绕过页面布局初始化错误。（您也可以使用手动延迟）
您可以使用私有 API 来隐藏或显示底部工具栏。但这不是首选，它将被苹果应用商店拒绝。

【讨论】：

我很欣赏这里周到的回复，但你在这里错过了根本错误......添加这个没有任何区别。 .d-header { 顶部：常量（安全区域插入顶部）；从面板的角度来看，safe-area-inset-top 是 0，它认为整个页面都在以普通视图呈现，这在 Safari 中都可以 100% 正常工作。在 Safari 视图控制器中，有时位置 0 位于 URL 栏的后面。 barCollapsingEnabled=false 将解决此问题，但页脚叠加层将始终存在，这是一种耻辱。
我在许多初创公司工作过，每次遇到这个问题，前端团队都会在 CSS 或其他与布局相关的文件中进行一些更改 @SamSaffron 关于页脚视图，是的，这只是一种解决方法，您可以扩展它。我会更新它的答案，如果你觉得答案有用，你可以查看并投票;)
注意：barCollapsingEnabled = false 100% 始终如一地破坏事物，所以我认为这不是一个可行的解决方案。我能想到的唯一可行的解决方案是停止尝试将固定面板定位在页面的顶部或底部。我在 SVC 中尝试过的其他一切都中断了。
用最少的复制更新了 OP，遗憾的是，回复中的建议没有任何帮助。黑客滚动将是非常危险的。
了解，但我们不能真正让这个答案以“实际上这不是 SFSafaryViewController 的错误”开头。很混乱，你能编辑一下吗

【解决方案2】：

如果您如下覆盖prefersStatusBarHidden 会怎样？

override func prefersStatusBarHidden() -> Bool {
    return true
}

你可能想手动添加一个重新加载按钮:-(

【讨论】：