有什么解决方法可以避免SFSafariViewController隐藏固定位置的标题吗? [英] Are there any workaround to avoid SFSafariViewController from hiding fixed position headers?

查看：604
本文介绍了有什么解决方法可以避免SFSafariViewController隐藏固定位置的标题吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

SFSafariViewController 具有此Safari浏览器中无法再现的错误.

SFSafariViewController has this bug that is not reproducible in Safari.

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

Regularly it will obscure the top of a fixed panel behind the site name / done chrome.

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

This happens cause internally it loses sync between actual height of the page and size of the shrinking header chrome.

此问题在其他地方报告:

This issue was reported elsewhere at: https://meta.stackexchange.com/questions/279792/new-ios-chat-headers-occasionally-hide-behind-safari-navigation-controls-when-vi and is an issue in iOS 9 and up (still an issue in 12.0.1)

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

To reproduce make a dummy app with SFViewController and navigate to a site with a fixed header such as bbs.boingboing.net then click around and browse a few topics.

由于此错误已经存在两年了，所以我想知道是否存在某种不涉及在标头顶部添加常规填充的变通方法吗?

Since this bug is now a couple of years old I am wondering if there is some sort of workaround that does not involve adding a general padding to the top of the header?

使用此HTML制作页面

Make a page with this 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应用程序)

Open in SafariViewController (host it somewhere online and then email a link, gmail app in iOS uses Safari View Controller, Discourse app as well)

快速滚动到底部

标题被隐藏了一半.

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

Insets make no difference inset for top is 0, cover viewport property makes no diff.

推荐答案

-问题

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

- The Issue

Testing in different environments shows that the issue only appears in SFSafariView and the original safari app is not infected. And it's only appear in iPhone's with notch in portrait mode when user riches the end of the page and scroll again; So the page should go up and navigation bar automatically appears again and conflict will happen.

iPhone 8-页面底部-纵向(确定)

iPhone 8 - Bottom of the page - Portrait (OK)

iPhone XR-页面底部-纵向(不正确)

iPhone XR - Bottom of the page - Portrait (NOT OK)

iPhone XR-页面底部-纵向(确定)

iPhone XR - Bottom of the page - Portrait (OK)

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

iPad Pro 9.7 - Bottom of the page - Landscape (OK)

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

In some cases this may not be SFSafaryViewController's bug.

  • 因此，如果您有权访问要嵌入到SFSafaryViewController中的网站的前端开发人员，请向他们介绍以下内容:
  • So if you have access to front-end developers of the site that you want to embed in the SFSafaryViewController, introduce the following to them:

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

Therefore to resolve this Apple implemented new safe-area-inset, pre-defined set of 4 constants and a new CSS function called constant(). The safe area pre-defined constants are as follows: safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom and save-area-inset-left. When you combine all four of those constants, you can reference the current size of safe area inset on each side. The constant() works everywhere a var() does.

有很多网站向您展示如何将网页应用于iPhoneX.这是其中一个.

There are a bunch of sites that show you how to adopt a web page to iPhone X. Here's one of them.

也许他们可以尝试将div放置在可滚动部分的外部，并固定位置.因此，如果您有滚动的代码:

Maybe they could try placing the div outside of the scrollable part, and have the position fixed. So if you have a code where it scrolls:

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

div滚动容器中的任何元素都会滚动.

Such where any element in the div scroll-container, it will scroll.

如果将其放置在可滚动部分之外:

If they place it outside of the scrollable part:

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

并放入position:fixed;或position:absolute;或position: sticky或device-fixed;或#not-scrollable的css中的等等.它不应该滚动.

and put position:fixed; or position:absolute; or position: sticky or device-fixed; or etc. in the css for #not-scrollable, It shouldn't scroll.

  • 因此，如果您无权访问要嵌入在SFSafaryViewController中的网站的前端开发人员，请尝试以下操作(不推荐):

  • So if you don't have access to front-end developers of the site that you want to embed in the SFSafaryViewController try the following (Not recommended):

  • 尝试转动 barCollapsing safaryViewController.configuration.barCollapsingEnabled = false
  • 或尝试将其嵌入navigationController中，并摆脱SFView的标头
  • 或使用通过控制器而不是SFSafaryViewController实现全屏WKWebView.
  • Try turning barCollapsing safaryViewController.configuration.barCollapsingEnabled = false
  • or Try embedding it in a navigationController and get rid of the SFView's header
  • or Use Implement a full screen WKWebView with controller instead of SFSafaryViewController.

注意(适用于那些讨厌工具栏的人)

Note (For those who mess with the toolbar)

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

这篇关于有什么解决方法可以避免SFSafariViewController隐藏固定位置的标题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆