Блог

Главная - Вопросы по программированию - Мобильное меню расширяется с помощью Firefox и Safari

Мобильное меню расширяется с помощью Firefox и Safari

#css #firefox #joomla #mobile-safari

Вопрос:

У меня есть мобильное меню, которое должно исчезать при прокрутке пользователями. Я действительно хорошо поработал, но теперь у меня есть проблема, которая поражает меня. Я использую headroom.js чтобы меню исчезало и появлялось снова. Для элемента headroom я определил несколько классов css. Все это встроено в шаблон Joomla.

Теперь, в мобильном браузере Firefox, а также в Safari (браузере iPhone), я получаю это странное поведение, когда классы заголовков растягиваются до ширины 1500 пикселей, значение, которое нигде не определено в моих css-файлах. Когда я позволяю Chrome имитировать мобильный видовой экран, все работает так, как должно.

Мой html:

 …
<header class="headroom" id="main-header-navi-headroom">
    <nav id="nav-main" class="navbar navbar-default" style=" background-color: #fff;">
        <div class="navbar-header">
            <!-- a button to toggle navbar-collapse goes here -->
        </div>

        <div class="collapse navbar-collapse" id="collapsible-menu">
            <!-- all my menu points are being summoned here -->
        </div>

    </nav>
</header>
…

Мой шаблон.css

 .headroom {
    position: sticky;
    top: 50px;
    left: 0;
    right: 0;
    transition: all .6s ease-in-out !important;
    z-index: 900;

}
.headroom--unpinned {top: -150px;}
.headroom--pinned {top: 50px;}

Мой template_responsive.css:

 @media (max-width: 1179px) {
    .headroom {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        margin-top: 0;
        max-height: calc(var(--vh, 1vh) * 100);
        overflow-y: auto;
        -webkit-transition: -webkit-transform 300ms ease-out;
        transition: -webkit-transform 300ms ease-out;
        -o-transition: -o-transform 300ms ease-out;
        transition: transform 300ms ease-out;
        transition: transform 300ms ease-out, -webkit-transform 300ms ease-out, -o-transform 300ms ease-out;
        will-change: transform;
        z-index: 9998;
    }
  
  .headroom--pinned {
    top: 50px;
    position: sticky;
  }
  
  .headroom--frozen {
    top: 0 !important;
  }
  
  a.reduced-z {
    z-index: 9997 !important;
  }

    .headroom--unpinned { 
      -webkit-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
      top: 0;
    }
}

What I’ve tried: I tried to add a max-width: 100%; property to the headroom class, to no avail. Also, in my template there is another <nav> element that has max-width set to 100%, but it gets still rendered to a width of 1500 pixels.

What confuses me are two things:

  1. Во всем моем css нет класса или идентификатора, ширина которых была бы установлена на 1500px. Сначала я подумал, что, возможно, эта опора каким-то образом просочилась в мой элемент меню. Но так как их нет, я не понимаю, как Firefox придумывает такую ширину.
  2. Если я просто масштабирую обычное окно Firefox на своем настольном компьютере, все работает нормально. Просто предварительный просмотр мобильного устройства или реальное мобильное устройство вызывают описанные проблемы.

Есть какие-нибудь идеи о том, почему возникает эта проблема и как ее устранить?

Метки: