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

我有一个带有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中重现.

我只是编写一些代码,一个接一个地尝试

尝试以下

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.

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

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

我在为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中滚动时闪烁或消失的固定定位元素.

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

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

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