在iOS 11中，当在Webview中向下滚动时，固定的页眉会消失。

Question

我有一个本地的iOS应用程序，使用webview来显示网页内容。 我的应用程序中有一个固定的标题，具有以下属性：

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

在升级到iOS 11之前，一切都正常工作。现在当我上下滚动页面时，标题栏会在滚动过程中消失，在滚动完成后又重新显示。

在Xcode 8中也可以重现此问题。

- Bergerova

---

也许定义 top: 0px; left: 0px; 会有帮助？ - Manuel Otto

@abarax：如果继续使用“position: fixed”，恐怕没有解决方案。建议使用position: absolute。 - Duannx

@Bergerova 请查看我编辑后的答案，苹果官方文档上说了什么？我们应该使用 WKWebView 而不是 UIWebView 或 WebView。 - iPatel

@iPatel，这对我仍然没有解决问题。使用WKWebView解决了你的问题吗？ - Bergerova

@Bergerova：根据苹果文档，你应该只使用WkWebview。你试过了吗？请告诉我。 - Dhanunjay Kumar

@Dhanunjay Kumar，是的，我已经用WKWebView替换了旧的WebView，但是固定的标题仍然消失了。 - Bergerova

Answer 1

我只是在编写一些代码，一个一个地尝试。

• 请尝试以下内容：

  self.automaticallyAdjustsScrollViewInsets = false
  

• 请尝试以下操作

[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];

• 尝试以下代码：（更改您的代码）

header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

以下是一些有用的链接！

• http://ayogo.com/blog/ios11-viewport/

• https://forums.developer.apple.com/thread/90472
• 如何解决 iOS 11 中固定模态框内输入元素的问题
• https://github.com/PierBover/ios-iframe-fix
• https://stanko.github.io/ios-safari-scoll-position-fixed/

根据苹果官方文档：

重要提示：

从 iOS 8.0 和 OS X 10.10 开始，请使用 WKWebView 将 web 内容添加到您的应用程序中。不要使用 UIWebView 或 WebView。

因此，您应该尝试一次使用 WKWebView。

- iPatel

Answer 2

position: fixed 一直以来 都 是 iOS 中 一个 问题。在每个 iOS 版本中似乎都存在这个问题。现在，我找不到关于应用程序从 iOS 10 到 11 行为变化的任何信息，你可以考虑将其报告为错误；另一方面，考虑到遇到此问题的大量用户以及它更或多或少地影响了 所有 最新版本的 iOS，我建议不要使用 position: fixed。

最常见的解决方法是 transform: translateZ(0)，这不仅适用于iOS并防止任何可能的 闪烁, 它还强制浏览器使用硬件加速访问GPU来 使像素飞行。它应该也可以在iOS 9中不使用前缀 -webkit- 的情况下工作。

- Paolo Forgia

---

我已经尝试使用 transform: translateZ(0)，但它并没有解决问题。 - Bergerova

我的情况也不起作用 :( 这个元素是position: relative; - Huw Davies

显然，这个解决方案在iOS 11之前有效，如果我找到了解决方案，我会更新这个答案。感谢您的反馈。 - Paolo Forgia

@PaoloForgia，你说得很对，这现在是iOS11的一个问题，我认为它会给很多人带来麻烦！ - Huw Davies

现在我在iOS 14和iOS 15上遇到了一个显示问题，这个加速方法不起作用了。当我滚动时，固定的标题偶尔会出现1像素的间隙。 - sdym

Answer 3

We曾遇到类似问题，使用以下两个插件解决了问题： https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix 第一个插件将默认的WebView更改为WKWebView，第二个插件提供了修复CORS问题的解决方案，我们可以在使用WKWebView时看到这个问题。

- Dilip

---

这对我非常完美地起作用了！实际上，使用这个wkwebview引擎还提高了我的应用程序的可用性...非常感谢！！！ - Igor Trindade

这个完美地运行了。仍需使用WKWebView全面测试应用程序。重要提示： 重要说明： 从iOS 8.0和OS X 10.10开始，请使用WKWebView将Web内容添加到您的应用程序中。不要使用UIWebView或WebView。 - Akash Pal

Dilip，我正在使用PhoneGap Build，并且引擎插件在npm上，因此可以安装。但是我该如何安装wkwebviewxhrfix？我需要将src / ios文件夹包含到我的项目中吗？谢谢。 - Claes Gustavsson

@ClaesGustavsson - 尝试使用“phonegap plugin add https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix”。如果这不起作用，您可以在项目文件夹中从GitHub下载整个存储库，然后从那里安装相同的内容。 - Dilip

谢谢Dilip。使用https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix，我可以从我的服务器加载文件吗？还是只能加载手机上的本地文件？ - Claes Gustavsson

您应该能够从服务器安装。"phonegap plugin add github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix"无法工作？ - Dilip

Answer 4

我曾在一个为iOS构建的Cordova项目中遇到非常相似的问题，该项目使用了一个Webview。Cordova默认使用UIWebView作为其Webview引擎，并尝试了此线程和许多其他线程中提到的所有可能的修复方法。最终，我们唯一的解决方案是将Webview引擎从UIWebView更改为WKWebView（https://developer.apple.com/documentation/webkit/wkwebview）。对于Cordova，通过插件https://github.com/apache/cordova-plugin-wkwebview-engine引入WKWebView非常简单。

引入WKWebView并处理它引起的某些问题后，我们在iOS 11中滚动时不再出现闪烁或消失的固定定位元素。

- calle

---

这对我也解决了问题。但它会破坏其他东西，比如下载和访问文件。为什么这不是一个更大的问题？Cordova 在最新的 iOS 发布中几乎无法使用？ - David Schumann

它对我没用，不知何故我的Angular没有加载，只有一个空白屏幕。 - Akash Pal

这个答案对我来说确实有效。但我不确定是否适合为此奖励悬赏金，因为它并没有解决标准UIWebView的问题。然而，如果我们到了截止日期，这可能是能够得到奖励的那一个。 - abarax

Answer 5

诀窍是强制使用GPU加速。要做到这一点，请将translate3d添加到#header元素中。

transform: translate3d(0,0,0);

如果嵌套在 #header 元素内部的元素继续消失，请将 translate3d 添加到它们中。

- Dedering

---

我已经尝试使用 transform: translate3d(0,0,0)，但它并没有解决问题。 - Bergerova

如果您将 translate3d(0,0,0) 应用于 #header * { 并且同时针对嵌套元素进行定位，会发生什么？ - Dedering

这对我也无法解决这个问题。 - David Schumann

这对于在WKWebview中首次加载时不显示（但在滚动后显示）的固定定位元素非常有效。谢谢！ - Penar

Answer 6

固定定位在iOS上效果不佳，但我在我的cordova应用中使用了绝对定位，从未遇到任何问题。

- Tapas

Answer 7

你可能已经在iOS 11的一些更改中看到了这篇文章，但如果没有，也许它适用于你的情况？

其中一个viewport-fit: contain/cover/auto选项？

或者改变你的代码使用constant值来设置padding-top？

- Ben

Answer 8

我在使用position:fixed和position:sticky时也遇到了同样的问题。将UIWebView更改为WKWebView后，问题得到了解决：

#import <WebKit/WebKit.h>

....

@property (weak, nonatomic) IBOutlet WKWebView *myWebView;

从iOS 8.0和OS X 10.10开始，使用WKWebView将Web内容添加到您的应用程序中。不要使用UIWebView或WebView。

https://developer.apple.com/documentation/webkit/wkwebview

- Claytronicon

Answer 9

这对我有效

position: sticky

- Lauyonggang

Answer 10

你尝试过使用 position:sticky 而不是 position:fixed 吗？

在过去，它在 iOS 上运行得非常好。 请注意，position:sticky 需要定义规则 top。

因此，在你的情况下最终解决方案应该是：

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}

如果您需要额外的顶部偏移量，可以将top:0;规则从零调整为任何像素数。

还有一个最后的注意事项：粘性元素不会从文档流中提取元素，并且将作为普通文档元素（例如具有position:static或relative的div），而不是绝对定位的元素（在fixed或absolute的情况下）。

http://caniuse.com/#feat=css-sticky

- Andrew Ymaz

---

我曾经遇到过同样的问题，position:sticky也没有解决。改用WKWebView解决了这个问题。 - Claytronicon