Vue Bootstrap 4 Высота панели навигации и раскрывающийся список не работают в Safari - PullRequest
0 голосов
/ 15 апреля 2020

У меня возникла следующая проблема с Navbar в браузерах Safari:

enter image description here

У меня нет устройства iOS или Ma c так что я не могу отладить его локально. Я уже попытался добавить пустую href="#" к моему b-navbar-toggle, как это было рекомендовано другим потоком, но безуспешно.

Мой код навигационной панели выглядит следующим образом. Больше не добавлено CSS.

 <template>
  <b-navbar id="nav" toggleable="lg" type="dark" variant="dark">
    <b-container>
      <b-navbar-brand to="/">TRIAB</b-navbar-brand>
      <b-navbar-toggle href="#" target="nav-text-collapse"></b-navbar-toggle>
      <b-collapse href="#" id="nav-text-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item active-class="active" exact to="/">{{ $t('nav.home') }}</b-nav-item>
          <b-nav-item active-class="active" to="/about">{{ $t('nav.about') }}</b-nav-item>
          <b-nav-item active-class="active" to="/products">{{ $t('nav.products') }}</b-nav-item>
          <b-nav-item active-class="active" to="/news">{{ $t('nav.news') }}</b-nav-item>
          <b-nav-item active-class="active" to="/contact">{{ $t('nav.contact') }}</b-nav-item>
        </b-navbar-nav>
      <b-navbar-nav class="ml-auto">
          <b-nav-item @click="$i18n.locale = 'en'">
            <img src="../../assets/img/flags/us.png" alt="us flag">
          </b-nav-item>
          <b-nav-item @click="$i18n.locale = 'sv'">
            <img src="../../assets/img/flags/sv.png" alt="sv flag">
          </b-nav-item>
      </b-navbar-nav>
      </b-collapse>
    </b-container>
  </b-navbar>
</template>

Навбар без проблем работает как на Android, Chrome, Firefox, так и на Edge. У кого-нибудь есть идеи, почему это происходит?

1 Ответ

0 голосов
/ 30 апреля 2020

Изменение display: flex; на display: webkit-box; исправило проблему на устройствах Safari и iOS.

...