iPhone网站和第一卷上的位置固定延迟

Question

我在我的移动网站上使用css固定位置作为顶部和底部导航栏，我注意到我的iPhone浏览器（Safari和Chrome）上有一个错误：固定的位置直到第一个滚动结束才开始工作。 ..然后它适用于所有下一个卷轴。

示例：

http://jsbin.com/ugaraf/1

屏幕截图：

刷新后第一次向下滚动时出现错误：http://goo.gl/yD5iz

然后正常工作：http://goo.gl/mUKSn

你经历过同样的事吗？有没有办法解决这个问题？ 感谢。

Answer 1

我有一个固定顶部的网站，可以使用safari mobile和chrome。

这个特定DIV的CSS是

#navbar{

 width:100%;
 height:80px;
 background-color:#FFFFFF;
 border-bottom:4px solid #007f3f;
 position:fixed;
 z-index:10;

}

就我而言，由于其他div位于position:relative，因此设置了z-index。

至少对于最高者，你真的不需要top:0 尝试没有它并发布一些反馈。

干杯。

Answer 2

这可以在iOS设备上启用硬件加速：

.youraffixelement {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}