ios - 位置为 :fixed in iOS 11 的闪烁/消失 header

Question

我有一个带有以下 CSS 的标题:

.header{
  display: block;
  top: 0;
  position: fixed;
  width: 100%;
  max-width: 1320px;
  z-index: 10;
  box-sizing:border-box;
}

我在内容容器中无限滚动。在 iOS 11 中，当我滚动时，标题会消失一秒钟，然后再次出现。

我尝试了以下修复:

1. 转换:translate3d(0,0,0)

2. 转换:translateZ(0)

3. -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility:隐藏； -webkit-perspective: 1000;

4. 我也在元视口(viewport)标签中添加了 viewport-fit="cover" 和 viewport-fit="contain"。按照建议here .

5. 此外，header 的所有子元素的 CSS 中都没有 position: fixed;。
6. 我也通过添加 left: 0; 尝试了上述解决方案。
7. 建议我尝试过的另一个解决方案是将 -webkit-overflow: hidden; 添加到页面正文。
8. 我还尝试将 overflow-x:hidden; 添加到页面的 html 标记中。

以上所有解决方案均无效。

Answer 1

我最近与此作斗争，基本上 iOS 不喜欢 position: fixed 与滚动相结合。

transform: translate3d(0,0,0) 似乎适用于 iOS 12.x.x，但导致我的标题在滚动时闪烁(这是另一个问题)。

我最终得到了:

position:absolute