带位置的闪烁/消失标题:在iOS 11中修复

时间:2017-10-04 11:57:15

标签: ios css viewport css-transforms ios11

我有一个包含以下CSS的标题:

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

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

我尝试了以下修复:

  1. transform: translate3d(0,0,0)

  2. transform: translateZ(0)

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

  4. 我也在元视口标记中添加了viewport-fit="cover"viewport-fit="contain"。正如所建议here

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

2 个答案:

答案 0 :(得分:0)

我最近为此进行了战斗,iOS基本上不喜欢position: fixed结合滚动。

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

我最终遇到了:

position: absolute

答案 1 :(得分:-1)

您是否尝试将overflow-x: hiddenposition: relative添加到.header的包装元素中?

我不知道你的情况是否可能,因为你只共享了.header CSS类,所以你可能没有父母可以应用它,但我的回答here似乎有效。我希望它有所帮助!