Question

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

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

Answer 1

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

另见Fixed positioned elements disappear on page unload

修改

我坚持下去......

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

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

＆＃34; [...]文件卸载时的合成图层被破坏的速度要快得多不是[...]的元素这已被WebKit工程师证实是一个错误。＆＃34;

<强> HOPE：

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

我比较iOS 8下的常见UIWebView和新WKWebView。使用UIWebView显示HTML /网页内容的应用仍会受到问题的影响：（

Answer 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开发工具上启用“show paint rectangle”，以显示页面上的所有重绘。

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

2 个答案: