固定标题在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'类和转换内联样式，那么你将摆脱滚动效果。

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

1. 移除<nav>作为'mat-drawer-content' div的子项并添加为兄弟，以便不会在<nav>标记上应用转换效果。

或

1. 在overflow: hidden上添加'mat-drawer-content'媒体资源。

我在真实设备上尝试了它们，但它确实有效。 来自iphoneX的附加截图。

Answer 2

我已经调试了它，我想出的唯一解决方案就是你必须移动nav标签以确保包含其内部和不移动其他导航标签之类的那么红色的就像它一样离开它们而蓝色的那个让它向上移动

<nav aria-label="Navigation links" class="mat-tab-nav-bar mat-primary" id="topNav" md-tab-nav-bar=""></nav>

在那个div之外

<div cdk-scrollable="" class="mat-drawer-content" style="margin-left: 0px; margin-right: 0px; transform: translate3d(0px, 0px, 0px);">

一旦div nav之外的class="mat-drawer-content"标记一切正常，因为滚动它时class="mat-drawer-content"移动整个组件会导致此问题

Answer 3

我发现问题是类var checkboxes = ['series1', 'series2', 'series3'] checkboxes.forEach((elem, i) => { var checkbox = document.getElementById(elem) checkbox.onchange = function() { chart.series[i].update({ showInLegend: chart.series[i].legendItem ? false : true }) chart.series[i].setVisible() } }) 的css overflow属性;只需从该类中删除.mat-drawer-content或将其设置为overflow: auto;，该错误就会在Safari iOS中消失。我还在其他浏览器和平台上测试过，删除该属性似乎不会影响其他任何内容。

希望它有所帮助！