带有位置的闪烁/消失标题：在 iOS 11 中已修复答案

【问题标题】：Flickering/vanishing header with position:fixed in iOS 11带有位置的闪烁/消失标题：在 iOS 11 中已修复
【发布时间】：2018-03-15 19:28:33
【问题描述】：

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

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

我在内容的容器中有无限滚动。在 iOS 11 中，当我滚动时，标题会消失一秒钟然后又回来。

我尝试了以下修复：

transform: translate3d(0,0,0)
transform: translateZ(0)
-webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000;
我也在元视口标签中添加了viewport-fit="cover" 和viewport-fit="contain"。正如建议的here。
同样，header 的所有子元素的 CSS 中都没有 position: fixed;。
我也通过添加left: 0; 尝试了上述解决方案。
建议我尝试的另一个解决方案是将-webkit-overflow: hidden; 添加到页面正文中。
我也尝试将overflow-x:hidden;添加到页面的html标签中。

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

【问题讨论】：

【解决方案1】：

您是否尝试将overflow-x: hidden 和position: relative 添加到.header 的包装元素中？

我不知道你的情况是否可行，因为你只共享了@987654325@ CSS 类，所以你可能没有父母可以应用它，但我发现这个答案here 似乎有效。希望对你有帮助！

【讨论】：

【解决方案2】：

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

transform: translate3d(0,0,0) 似乎可以在 iOS 12.x.x 上运行，但会导致我的标题在滚动时闪烁（这是另一个问题）。

我最终得到了：

position: absolute

【讨论】：