10

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

我有一个简单的 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 mobile safari 中滚动时，会发生以下情况：

  • 首先向下滚动——标题随着页面顶部移动，直到滚动完成。

  • 第二次向下滚动——标题完全消失，滚动完成后不会重新出现。

  • 向上滚动（标题仍然可见） - 标题完全消失，并且在到达页面顶部时不会重新出现。

  • 向上滚动（隐藏标题）- 标题保持隐藏，到达页面顶部时不会重新出现。

  • 向上滚动（已在页面顶部隐藏标题）- 标题重新出现并正常运行，直到页面向下滚动两次。

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

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

更新：

因此，在标头的父级（.stream）上删除 -webkit-transform3d() 似乎可以解决问题，因此父级 div 的呈现方式和内部的标头必须存在冲突。

不过仍在寻找解决方法。

4

5 回答 5

18

我遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素（transform: translateZ(0);-webkit-transform: translateZ(0);）来修复它，这会强制浏览器使用硬件加速来访问设备的图形处理单元 (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 */
}
于 2014-09-18T23:21:22.447 回答
0

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

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

这是代码！

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


.positionsticky {
    animation: repaint 1ms;
  animation-iteration-count: infinite;
}
于 2018-03-25T02:36:43.540 回答
0

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

.sticky_menu {
   position: fixed;
   top: 0;
}
于 2019-06-25T23:19:14.787 回答
0

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

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

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

function topbarIntoView() {
  var dom = document.querySelector("#topbar");
  if (dom) {
    dom.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
于 2020-07-30T18:14:38.790 回答
-2

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

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

它对我有用。

于 2016-10-24T06:21:31.657 回答