在ios7手机游戏中消失的位置固定标题

Question

我一整天都搞乱这个,似乎无法找到解决办法.

我有一个简单的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;
   }

标题下方的内容具有以下css:

.stream .stream-content {
  position: relative;
  padding-top: 41px;
  -webkit-transform: translate3d(0, 0, 0);
}

在ios7移动safari中滚动页面时,会发生以下情况:

• 首先向下滚动 - 标题随页面移动一直移动,直到滚动完成.

• 第二次向下滚动 - 标题完全消失,滚动完成后不会重新出现.

• 向上滚动(标题仍然可见) - 标题完全消失,并且在到达页面顶部时不会再出现.

• 向上滚动(标题隐藏) - 标题保持隐藏状态,并在到达页面顶部时不再出现.

• 向上滚动(已在页面顶部隐藏标题) - 标题重新出现并正常运行,直到页面向下滚动两次.

我在iOS6移动游戏中没遇到这个问题,所以这个问题似乎与滚动时调整大小的新网址有关.

其他人有类似问题吗？建议欢迎.

更新:

因此,在标头的父(.stream)上删除-webkit-transform3d()似乎会消除问题,因此必须存在与父div呈现方式和内部标头的冲突.

仍在寻找工作.

Answer 1

我有同样的问题,它似乎是一个错误,当页面内部进行太多时,我可以通过将以下转换代码添加到固定位置元素(transform: translateZ(0);-webkit-transform: translateZ(0);)强制浏览器来修复它使用硬件加速来访问设备的图形处理单元(GPU)以使像素飞行.另一方面,Web应用程序在浏览器的上下文中运行,这使得软件可以完成大部分(如果不是全部)渲染,从而减少了转换的马力.但是Web一直在追赶,大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速.

使用-webkit-transform:translate3d(0,0,0); 将GPU转换为CSS过渡的动作,使它们更平滑(更高的FPS).

注意: translate3d(0,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 */
}