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

Question

我有一个带有webview的原生iOS应用程序来显示网页内容。 我的应用程序中有一个固定的标题，其中包含以下属性：

#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
• How to fix the iOS 11 input element in fixed modals bug
• https://github.com/PierBover/ios-iframe-fix
• https://stanko.github.io/ios-safari-scoll-position-fixed/

From Apple official note:

  

重要：

     

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

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

Answer 2

使用iOS的

position: fixed has always been a problem。似乎在iOS的每个版本中，问题仍然存在。现在，我无法找到有关应用程序从iOS 10到11的行为更改的任何内容，您可以考虑reporting this as a bug;另一方面，看到遇到此问题的大多数人以及影响或多或少所有 iOS的最新版本的事实，我建议不要使用position: fixed。

最常见的解决方法是transform: translateZ(0)，这不仅适用于iOS并且可以防止任何可能的flickering，它还会强制浏览器使用硬件加速来访问GPU {{3} }}。它也应该没有来自iOS 9的前缀-webkit-。

Answer 3

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

Answer 4

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

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

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

Answer 5

诀窍是强制GPU加速。通过向translate3d元素添加#header来执行此操作。

transform: translate3d(0,0,0);

如果嵌套在#header元素内的元素继续消失，也会向其添加translate3d。

Answer 6

固定位置对iOS不起作用，但我在我的cordova应用程序中使用绝对位置，这对我来说永远不会引起任何问题。

Answer 7

您可能已经在some changes in iOS 11上看过这篇文章，但如果没有，也许它会适用于您的情况？

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

或者更改代码以使用constant的{​​{1}}值？

Answer 8

我对这两个位置都有同样的问题：固定和位置：粘性。从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

Answer 9

您是否尝试使用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;规则从零调整为px中的任意数字。

还有一个最后的注释：粘性元素不会从文档流中提取元素，并且将作为普通文档元素（如带position:static或relative的div），但不像绝对定位元素（如果是fixed或absolute）。

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

Answer 10

我一直在与这个同样的问题作斗争。

这个问题（至少在我正在开发的应用程序中表现出来）似乎只发生在高层组合的屏幕上（因为它们需要大量滚动）并且相当复杂。

一般来说，至少在我看来，当动量滚动开始时，这个问题似乎才真正体现出来。

虽然特别是有一个屏幕，其中包含15个可左右滚动的图像行，但无论您滚动它的速度有多慢，都会打破头/脚。

在我自己的辩护中......我完全没有没有来处理这个设计。 ： - ）

无论如何......

经过大量的实验搜索后，我设法找到了各种各样的“解决方案”。

请注意，我并不是说这是去这里的方式。但是，也许在移动应用领域拥有更多经验的人可以获取这些信息，并从中推断出不那么糟糕的东西。

第一件作品如下：

html,
body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

然后对于充当屏幕主体的容器：

.main-content-area {
    overflow-y: auto;
    height: 100%;
}

这会破坏你的应用程序的动力滚动。我知道，这不是很好。但由于削减了用户非常快速滚动的能力，屏幕渲染似乎能够跟上并且问题消失。

同样，我不建议将其作为生产的可行解决方案。因为它显然不是很好。

我正在提供更多作为真正解决方案的可能踏脚石，希望它有所帮助。

<强> ===＆GT;＆GT;＆GT; UPDATE：

我有一个有效的解决方案。但是，正如我之前的其他人所指出的那样，我不得不避免使用固定定位。

相反，我使用绝对定位来定义页面的页眉，页脚和主要内容部分。然后只允许在主内容部分滚动。

如果有帮助，我将{POC}放在BitBucket

上

Answer 11

这对我有用

position: sticky