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

Question

我有一个带有以下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标签中。

所有上述解决方案都没有奏效。

Answer 1

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

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