修复了 ios Safari 弹跳时标题消失的问题

Posted 2023-03-06

【中文标题】修复了 ios Safari 弹跳时标题消失的问题

【英文标题】：Fixed header disapearing on ios safari bounce

【发布时间】：2018-10-22 19:08:04

【问题描述】：

当前结果：

预期结果：

如果您有 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;
    

【问题讨论】：

您的示例需要登录凭据

不需要登录就能看到bug，header在最上面

【参考方案1】：

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

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

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

将<nav> 作为'mat-drawer-content' div 的子元素移除并作为兄弟元素添加，这样<nav> 标签上就不会应用过渡效果。

或

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

我在真实设备上尝试了这两种方法，它都有效。 附上来自 iphoneX 的截图。

【讨论】：

我只有一部 iPhone 上的 safari，如何调试？我没有这门课，但我在顶部有完全相同的反弹效果。

您可以将您的 iphone 与 Mac 连接并从那里进行调试。网上有很多文章，试试这个：appletoolbox.com/use-web-inspector-debug-mobile-safari

【参考方案2】：

我发现问题是 .mat-drawer-content 类的 css overflow 属性；只需从该类中删除overflow: auto; 或将其设置为hidden，该错误将在Safari iOS 中消失。我还在其他浏览器和平台上进行了测试，删除该属性似乎不会影响其他任何东西。

希望对你有帮助！

【讨论】：

登录页面也会出现这种情况吗？我可以在那里重现错误吗？

我在连接到我的 Mac 的真实 iphone 中对其进行了测试。这就是我发布解决方案的原因。让我为你做一个截图@CameronGilbert

【参考方案3】：

我已经对其进行了调试，我发现唯一的解决方案是您必须移动 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 class="mat-drawer-content" 之外添加了 nav 标记，一切都会好起来的，因为当您滚动此 class="mat-drawer-content" 时，它会移动整个组件，这就是导致此问题的原因