在iOS 11中在webview中向下滚动时,固定标题会消失

Question

我有一个带有webview的原生iOS应用程序来显示Web内容.我的应用程序中有一个固定的标题,其中包含以下属性:

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

在我升级到iOS 11之前一切正常.现在当我向下/向上滚动时,标题在滚动期间消失,当滚动完成时,标题再次出现.

这也可以在Xcode 8中重现.

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
• 如何修复固定模态bug中的iOS 11输入元素
• https://github.com/PierBover/ios-iframe-fix
• https://stanko.github.io/ios-safari-scoll-position-fixed/

来自Apple官方说明:

重要:

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

所以你应该尝试一次WKWebView.

Answer 2

position: fixed 也 总是 被 一个 问题与iOS.似乎在iOS的每个版本中,问题仍然存在.现在,我找不到有关应用程序从iOS 10到11的行为更改的任何内容,您可以考虑将此报告为错误 ; 另一方面,看到遇到这个问题的大多数人以及影响或多或少影响iOS的所有最新版本的事实我建议不要使用position: fixed.

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

Answer 3

我在为iOS构建的Cordova项目中遇到了类似的问题,该项目使用了webview.Cordova默认使用UIWebView作为其webview引擎,我尝试了此线程和许多其他人提到的所有可能的修复.最后,我们唯一的解决方案是将webview引擎从UIWebView更改为WKWebView(https://developer.apple.com/documentation/webkit/wkwebview).使用Cordova,使用插件引入WKWebView非常简单https://github.com/apache/cordova-plugin-wkwebview-engine

在介绍WKWebView并处理它导致的一些问题后,我们不再遇到在iOS 11中滚动时闪烁或消失的固定定位元素.

Answer 4

我们遇到了类似的问题,并通过以下2个插件得到修复

https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

第一个插件将默认WebView更改为WKWebView,第二个插件为我们在使用WKWebView时看到的CORS问题提供修复.