固定标题的问题有时会在iOS上消失

Question

我正在处理this site并遇到一些固定标头问题。目前，当视口宽度低于952px时，导航将移动到屏幕顶部的位置：固定的栏。显然这是为移动设备等提供更多内容的屏幕空间。

问题是在iOS7上（在iPhone和iPad上测试），当使用下拉导航转到新页面时，导航在页面加载后消失，并且在用户向下滚动或更改设备之前不再出现取向。我测试的任何网络浏览器都没有出现这个问题。我目前没有任何Android或其他设备可以在那里进行测试。

到目前为止，我已经尝试在网上寻找答案，甚至是线索，看看到底发生了什么事。任何人都知道可能会发生什么，（甚至更好！）如何解决它？

Answer 1

有一些事情可能导致这种情况。

1。在.tinynav显示的css媒体查询中缺少分号：阻止

@media (max-width: 952px) {
    .tinynav{
    display: block;
    }
}

2。 “@media only screen and”

在移动设备上使用媒体查询时，最好使用以下方法：

@media only screen and (max-width: 952px) {}

3。元头标记

在html的头部，您需要包含以下元标记，以便iPhone或iPad等移动设备正确检测媒体查询：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

希望这会有所帮助。如果你按预期工作，请告诉我:)）

Answer 2

我遇到了与Chrome相同的问题，这似乎是一个错误，当页面内部有太多内容时，我可以通过将以下转换代码添加到固定位置元素来修复它，（ 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。这只是一种强制硬件加速的技术。

#element {
    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 Family of Browsers*/
}