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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/css/217863.html

猜你在找的CSS相关文章