消失的位置ios7移动Safari中的固定标题

我一直在搞这个，看起来无法找到解决办法。消失的位置ios7移动Safari中的固定标题

我有一个简单的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移动Safari浏览器的这个问题，所以这个问题似乎与新的url栏有关滚动调整大小。

其他人有类似的问题？建议欢迎。

更新：

这样看来，在标题的父（.stream）去除-webkit-的Transform3D（）删除了这些问题，所以必须有一个冲突父DIV呈现的方式头里面。

尽管如此，仍在寻找工作。

来源

2013-10-11 fscof

我有同样的问题，它似乎是一个错误发生在页面内部发生太多时，我可以通过将以下转换代码添加到固定位置元素来修复它（transform: translateZ(0);-webkit-transform: translateZ(0); ），强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞行。另一方面，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 */ 
}

来源

2014-09-18 23:21:22 Neo

谢谢 - 当我正在处理这个问题时，得出了同样的结论。有点相关，这里有更多关于移动safari中position abs和transform translate性能权衡的细节：http://stackoverflow.com/questions/11100747/css-translation-vs-changing-absolute-positioning-values/18516653#18516653 – fscof

-2

我面临着与iPad相同的问题。我尝试在JS部分添加iPad的代码，如下所示：

if(navigator.userAgent.match(/iPad/i)) { 
    //written code to scrolldown the header part 
}

它对我有用。

来源

2016-10-24 06:21:31 mounika

消失的位置ios7移动Safari中的固定标题

回答

相关问题