Question

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

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

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

好的小标题

标头太小（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 View Controller，Discourse应用程序）

快速滚动到底部

标题被隐藏了一半。

插入没有区别，顶部的插入为0，cover视口属性没有区别。

Answer 1

-问题

在不同环境中进行测试表明，该问题仅出现在SFSafariView 中，并且原始的Safari应用未受到感染。并且只有当用户丰富页面的末尾并再次滚动时，它才会在iPhone的纵向模式下显示。因此页面应该会上升，导航栏会自动再次出现，并且会发生冲突。

iPhone 8-页面底部-纵向（确定）

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

iPhone XR-页面底部-纵向（确定）

iPad Pro 9.7-页面底部-横向（确定）

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

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

-安全区域插图

因此，为了解决该问题，Apple实施了新的安全区域插入，一组预定义的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；或或{。{1}}的css中的等等。它不应滚动。

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

注意（适用于那些讨厌工具栏的人）

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

Answer 2

如果您按如下所示覆盖prefersStatusBarHidden怎么办？

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

您可能需要手动添加重新加载按钮：-(

有什么解决方法可以避免SFSafariViewController隐藏固定位置的标头？

好的小标题

标头太小（SF chrome应该很小，但是很大）

好的大标题

最小再现

2 个答案:

-问题

-安全区域插图