固定位置的元素在Safari iPhone上渲染速度较慢

Question

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

在iPhone上的Safari浏览器中，菜单似乎比其他内容渲染得更慢。我希望它能以相同的速度渲染。有解决方案吗？

- Frinsh

---

很难在没有真正的代码的情况下评论一个解决方案，但您可能想查看以下网站：http://css-tricks.com/efficiently-rendering-css/ 另外您也可以在Chrome/Firefox开发人员工具的网络选项卡中查看。 - Ms01

Cubsink：我已经添加了一个链接，展示了这个问题的例子。 - Frinsh

你的意思是希望页眉和正文同时出现吗？就像在页面的其余部分加载完毕后，页眉再出现一样。 - Douglas

@tedmiston 我自己在IOS7上遇到了这个问题，但是在iPhone 4上。 - Frinsh

通过比较以下两个链接，http://getbootstrap.com/examples/navbar-static-top/ 和 http://getbootstrap.com/examples/navbar-fixed-top/ ，可以看出Mobile Safari的问题。加载页面并在重新加载页面时查看导航栏。 固定的导航栏会消失一段时间。 - AppsolutEinfach

Answer 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中引入了一个更快的网络浏览组件：WKWebView。Safari使用它。在使用Safari时，问题消失了。 我比较了iOS 8下常见的UIWebView和新的WKWebView。仍然使用UIWebView来显示HTML/WEB内容的应用程序仍然受到影响 :(

- AppsolutEinfach

Answer 2

对于具有position:fixed属性的元素，经典的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开发工具中启用“显示绘制矩形”，以显示页面上的所有重绘。

- JuSchz

---

问题并不在于我滚动时它重新绘制。问题在于它似乎比页面加载时的其他内容渲染得更慢。 - Frinsh