5

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

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

4

2 回答 2

1

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

另见固定定位元素在页面卸载时消失

编辑：

我坚持...

固定元素被提升到复合层 ，并且在页面卸载时存在相应的错误。

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

“[...] 文档卸载时的复合层被破坏的速度比没有 [...] 的元素要快得多，这已被 WebKit 工程师确认为一个错误。”

希望：

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

我比较了 iOS 8 下的commonUIWebView和 new 。用于显示 html/web 内容的应用程序仍然受到问题的影响 :(WKWebViewUIWebView

于 2015-09-22T10:24:12.797 回答
-1

对位置固定的元素的经典 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 开发工具上启用“显示绘制矩形”，以显示页面上的所有重绘。

于 2013-11-10T17:56:31.837 回答