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

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

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

当页面在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 */
}

原文地址：https://www.jb51.cc/css/217863.html