Исправлено исчезновение заголовка при сбросе 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

Я обнаружил, что проблема в свойстве css overflow для класса .mat-drawer-content;просто удалите overflow: auto; из этого класса или установите hidden, и ошибка исчезнет в Safari iOS.Я также тестировал другие браузеры и платформы, и удаление этого свойства, похоже, ни на что не влияет.

Надеюсь, это поможет!

Answer 2

Прежде всего вы должны понять, что является причиной проблемы.

Если вы удалите класс 'mat-box-content' ивстроенные стили перехода, тогда вы избавитесь от эффекта прокрутки.

Теперь, если вы хотите эффект прокрутки и не хотите видеть эту проблему, у нас есть 2 решения:

1. Удалите <nav> как дочерний элемент 'mat-drawer-content' div и добавьте его как родного брата, чтобы эффект перехода не применялся к тегу <nav>.

или

Добавьте свойство overflow: hidden к 'mat-drawer-content'.

Я попробовал их на реальном устройстве, и оно работает.Прикрепленный скриншот с iphoneX.

Answer 3

Я отладил его, и единственное решение, которое я понял, это то, что вам нужно обязательно переместить тег nav, включая то, что внутри него, и не перемещать другие теги навигации , как этот, так что красные оставляют их как есть, а синие двигают вверх

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

снаружи от этого дива

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

как только тег nav за пределами этого div class="mat-drawer-content" все будет хорошо, потому что этот class="mat-drawer-content" при прокрутке перемещает весь компонент, и это вызывает эту проблему