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

【问题标题】：disappearing position fixed header in ios7 mobile safariios7移动Safari中消失的位置固定标题
【发布时间】：2013-10-19 22:36:13
【问题描述】：

我整天都在搞这个，似乎找不到解决办法。

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

header下面的内容有如下css：

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

当页面在 ios7 mobile safari 中滚动时，会发生以下情况：

首先向下滚动 -- 标题与页面顶部一起移动，直到滚动完成。
第二次向下滚动——标题完全消失，滚动完成后不会重新出现。
向上滚动（标题仍然可见）-- 标题完全消失，到达页面顶部时不会重新出现。
向上滚动（隐藏标题）-- 标题保持隐藏状态，并且在到达页面顶部时不会重新出现。
向上滚动（已在页面顶部隐藏标题）- 标题重新出现并正常运行，直到页面向下滚动两次。

我在 iOS6 移动 safari 中没有遇到此问题，因此该问题似乎与新的 url 栏在滚动时调整大小有关。

还有其他人有类似的问题吗？欢迎提出建议。

更新：

因此，在标头的父级 (.stream) 上删除 -webkit-transform3d() 似乎可以解决问题，因此父级 div 的呈现方式与内部的标头之间肯定存在冲突。

但仍在寻找解决方法。

【问题讨论】：

标签： css scroll ios7 mobile-safari css-position

【解决方案1】：

我遇到了同样的问题，这似乎是当页面内部发生太多事情时发生的错误，我可以通过将以下转换代码添加到固定位置元素来修复它，（@987654322 @) 强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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 */
}

【讨论】：

谢谢 - 当我在做这个的时候得出了同样的结论。有点相关，这里有更多关于移动 safari 中位置 abs 和 transform translate 之间的性能权衡的详细信息：stackoverflow.com/questions/11100747/…

【解决方案2】：

我在 iPad 上遇到了同样的问题。我尝试在 JS 部分中为 iPad 添加代码：

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

它对我有用。

【讨论】：

【解决方案3】：

当浏览器没有及时重新绘制元素时会发生这种情况，因此看起来好像它消失了，然后在滚动时重新出现。

如果上述答案对您不起作用，请在元素上使用无限 css 动画；强制浏览器继续重绘元素。

这是代码！

@keyframes repaint {
  from {
    width: 99.999%
  }
  to {
    width: 100%;
  }
}


.positionsticky {
    animation: repaint 1ms;
  animation-iteration-count: infinite;
}

【讨论】：

【解决方案4】：

我在 iPhone SE 上遇到了这个问题。尝试了 -webkit-transform: translateZ(0);诡计，但它没有帮助。我想移动的元素在第一个滚动的底部，我希望它在用户滚动到它之后获得位置：固定状态（用 js 解决了这个问题）。在其他地方工作，但在 SE 上，元素消失了。出于某种原因，它在设置 top: 0 后将元素移出屏幕，它为我解决了问题。

.sticky_menu {
   position: fixed;
   top: 0;
}

【讨论】：

【解决方案5】：

6 年后这仍然是一个问题...我尝试了各种使用 css transform 的建议，但没有奏效。我找到的唯一稳定的解决方案是向元素添加和 id，然后使用 scrollIntoView()。

场景是一个页面，顶部有滚动内容。当用户滚动到底部时，顶部消失。当用户向后滚动操作时，它不会轻易重新出现。此外，如果设备非常小并且有一个要填写的文本字段，则当该字段被聚焦时，顶部会消失。

我通过给顶部元素一个像'topbar'这样的id来解决它，然后在情况需要时使用scrollIntoView()。我为它写了一个小函数：

function topbarIntoView() {
  var dom = document.querySelector("#topbar");
  if (dom) {
    dom.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

【讨论】：