固定标题在ios safari反弹中消失

Question

目前的结果:

预期成绩:

如果您有iOS设备,可以在此处查看实际示例:client.wildfyre.net

我怎样才能解决这个问题？

码:

    #topNav {
      height: 50px;
      margin: 0 auto;
      background-color: #263238;
      color: white;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 5;
    }

    #topNavMenu {
      position: fixed;
      right: -20px;
      top: 7px;
    }

Answer 1

首先，您应该了解导致问题的原因。

如果删除“mat-drawer-content”类和过渡内联样式，那么您将摆脱滚动效果。

现在，如果您想要滚动效果并且不想看到这个问题，那么我们有2个解决方案：

1. 删除<nav>作为 div 的子级'mat-drawer-content'并添加为同级，以便过渡效果不会应用到标签上<nav>。

或者

2. overflow: hidden在 上添加属性'mat-drawer-content'。

我在真实设备上尝试了这两个方法，并且都有效。附上 iphoneX 的屏幕截图。