我一整天都搞乱这个,似乎无法找到解决办法.
我有一个简单的ul作为固定标头与以下css：
body {
width: 100%;
height: 100%;
min-height: 100%;
}
.stream .header {
position: fixed;
width: 100%;
height: 41px;
top: 0;
right: 0;
left: 0;
z-index: 10;
margin-bottom: 10px;
list-style: none;
}
.stream .stream-content {
position: relative;
padding-top: 41px;
-webkit-transform: translate3d(0,0);
}
当页面在ios7移动safari中滚动时,会发生以下情况：
>首先向下滚动 –
标题随页面移动一直移动,直到滚动完成.
>第二次向下滚动 – 标题完全消失,滚动完成后不会重新出现.
>向上滚动(标题仍然可见) – 标题完全消失,并且在到达页面顶部时不会再出现.
>向上滚动(标题隐藏) – 标题保持隐藏状态,并在到达页面顶部时不再出现.
>向上滚动(已在页面顶部隐藏标题) – 标题重新出现并正常运行,直到页面向下滚动两次.
iOS 6移动游戏中没有这个问题,所以问题似乎与滚动时调整大小的新url栏有关.
其他人有类似问题吗？建议欢迎.
更新：
因此,在标头的父(.stream)上删除-webkit-transform3d()似乎会消除问题,因此必须存在与父div呈现方式和内部标头的冲突.
仍在寻找工作.
解决方法
我有同样的问题,它似乎是一个错误,当页面内部进行太多时,我可以通过将以下转换代码添加到固定位置元素来修复它,(transform：translateZ(0 ); – webkit-transform：translateZ(0);)强制浏览器使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞起.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web已经迎头赶上,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速.
使用-webkit-transform：translate3d(0,0);将GPU转换为CSS过渡的动作,使它们更平滑(更高的FPS).
注意：translate3d(0,0)在您看到的内容方面没有任何作用.它在x,y和z轴上将对象移动0px.这只是一种强制硬件加速的技术.
#header {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari */
}
