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

我有一个本地的iOS应用程序与Web视图来显示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 11input元素
• 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 。

Answer 2

position: fixed 一直 是 iOS 的 问题 。 看来，在iOS的每个版本中，问题依然存在。 现在，我无法find任何有关从iOS 10到11的应用程序行为的变化，您可以考虑报告这是一个错误 ; 另一方面已经看到了大量的人谁遇到这个问题，事实上，影响或多或less所有最新版本的iOS我build议不要使用position: fixed 。

最常见的解决方法是transform: translateZ(0) ，这不仅在iOS上工作，并防止“任何可能的闪烁 ，它也迫使浏览器使用硬件加速来访问GPU 使像素飞行 ，它应该也没有前缀-webkit-来自iOS 9。

Answer 3

我有一个为iOS构build的Cordova项目，它使用了一个webview，这个非常类似的问题。 cordova默认使用UIWebView作为其webview引擎，我尝试了在这个线程和其他许多人提到的所有可能的修复。 最后，我们唯一的解决scheme是将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

诀窍是强制GPU加速。 通过将translate3d添加到#header元素来做到这一点。

 transform: translate3d(0,0,0); 

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

Answer 5

我们有类似的问题，并得到固定2个以下的插件

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

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

Answer 6

固定位置不适用于iOS，但我在我的cordova应用程序绝对使用位置，这绝对不会对我造成任何问题。

Answer 7

你可能已经看到这篇文章在iOS 11的一些变化 ，但如果不是这也许适用于你的情况？

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

或者改变你的代码使用一个constant数值的padding-top ？

Answer 8

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

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

所以最后的解决scheme应该是：

 #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中的任何数字。

还有一个最后的注意事项：那就是粘性元素不会从文档stream中提取元素，并且会像普通文档元素一样（比如position:static或relative div），但不像绝对定位元素（在fixed或absolute情况下）。

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

Answer 9

我自己也一直在和这个同样的问题作斗争。

这个问题（至less在我正在使用的应用程序中performance出来）似乎只发生在屏幕上，这些屏幕是高度组合（因为它们需要大量的滚动）并且相当复杂。

一般来说，至less对我来说，这个问题似乎只有在dynamic滚动的时候才真正显现出来。

尽pipe有一个特别的屏幕，其中包含15个左右滚动的图像行，无论您滚动多长时间，都会打乱页眉/页脚。

在我自己的辩护……我完全没有任何关系的devise。 🙂

好歹…

经过大量的实验，我设法想出了一个“解决scheme”。

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

第一件看起来像这样：

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

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

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

这将杀死您的应用程序的动力滚动。 我知道这不是很好。 但是由于用户的滚动速度非常快，屏幕渲染似乎能够跟上并且问题消失。

再次，我不推荐这是一个可行的生产解决scheme。 因为这显然不是很好。

我把这个作为一个可能的垫脚石提供给一个真正的解决scheme，希望它有所帮助。

=== >>>更新：

我有一个工作解决scheme。 但是，正如以前的其他人所指出的，我必须避免使用固定定位。

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

如果有帮助，我可以把BitCucket上的POC放在一起

Answer 10

这对我有用

 position: sticky