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

Question

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

在iPhone上的Safari中,菜单似乎比其他内容慢.我希望它以相同的速度渲染.这个问题有方法解决吗？

Answer 1

对于具有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 开发工具上启用“显示绘制矩形”，以显示页面上的所有重绘。