具有固定位置的元素在 Safari iPhone 上呈现缓慢答案

【问题标题】：Elements with fixed position renders slowly on Safari iPhone具有固定位置的元素在 Safari iPhone 上呈现缓慢
【发布时间】：2013-11-18 20:19:05
【问题描述】：

我有一个响应式网站，它使用移动设备上固定位置的菜单。

在 iPhone 上的 Safari 中，菜单的呈现速度似乎比其他内容慢。我希望它以相同的速度渲染。有解决办法吗？

【问题讨论】：

很难评论没有任何实际代码的解决方案，但您可能想看看：css-tricks.com/efficiently-rendering-css 您也可能想看看 chrome/firefox 开发人员工具中的网络选项卡。
Cubsink：我添加了一个链接，指向一个显示问题的示例
您针对哪个 iOS 进行测试？我已经在运行 7.0.3 的 5S 上尝试了该页面，但我没有注意到任何延迟渲染。
你的意思是想让header和body同时出现？就像页面的其余部分加载后出现的标题一样。
通过比较 getbootstrap.com/examples/navbar-static-top 和 getbootstrap.com/examples/navbar-fixed-top 可以看出 Mobile Safari 的问题。加载页面并在重新加载页面时查看导航栏。固定的导航栏会消失一会。

标签： ios iphone css css-position

【解决方案1】：

页面加载时没有问题。经过几个小时的测试，我发现问题出现在页面卸载上！该问题与 iOS 下的 WebKit（Mobile Safari & Chrome）有关。带有position: fixed、position: device-fixed 或position: sticky 的元素在页面卸载时消失。

另见Fixed positioned elements disappear on page unload

编辑：

我坚持...

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

来自http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb：

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

希望：

在 iOS 8 中引入了一个新的更快的 Web 视图组件：WKWebView。 Safari 使用它。使用 Safari 时问题消失了 :)

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

【讨论】：

【解决方案2】：

对位置固定的元素的经典 CSS 优化之一就是将其放在图层上。当用户滚动时，您将避免重新绘制此区域。为此，您可以添加使用 3d 变换，如下所示：

nav {
    background: none repeat scroll 0 0 #FF0000;
    height: 30px;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transform: translateZ(0);
}

不要忘记添加所有供应商前缀。您可以在 Chrome 开发工具上启用“显示绘制矩形”，以显示页面上的所有重绘。

【讨论】：

问题不在于我滚动时它会重新绘制。问题是它的渲染速度似乎比页面加载时的其余内容要慢。