固定定位元素在页面卸载时消失答案

【问题标题】：Fixed positioned elements disappear on page unload固定定位元素在页面卸载时消失
【发布时间】：2015-10-01 17:00:39
【问题描述】：

我有一个固定的顶部导航栏，当页面内容被滚动时，它始终位于所有内容的顶部。我注意到在 Chrome for iOS 和 Safari 独立模式下，固定栏在页面卸载时会在任何其他元素之前消失。如何让所有元素，无论定位如何，同时消失？

Demo：http://kodu.ut.ee/~b04866/demo/demo.html 在 Chrome for iOS 中加载页面，反复点击刷新。观察固定的 div 是如何先消失的，然后是其余的内容，最后是页面被重绘。

【问题讨论】：

这似乎是一个 WebKit 问题（使用 Mobile Safari 和 Chrome 测试）。带有position: fixed、position: device-fixed 或position: sticky 的元素在页面卸载时消失。

【解决方案1】：

固定元素被提升到一个合成层 并且页面卸载有相应的bug。

"[...] 文档卸载时合成层的销毁速度比 [...] WebKit 工程师已确认这是一个错误。”

希望：

在 iOS 8 中引入了一个新的更快的 Web 视图组件：WKWebView。 Safari 使用它。使用 Safari 时问题消失了 :) 不知道 Chrome 在 iOS 8 下是否受影响。

我比较了 iOS 8 下常见的UIWebView 和新的WKWebView。使用 UIWebView 显示 html/web 内容的应用程序仍然受到问题的影响:(

【讨论】：