मुझे सफारी ब्राउज़र पर अपने नेवबार के साथ निम्न समस्या आ रही है:

enter image description here

मेरे पास आईओएस डिवाइस या मैक नहीं है इसलिए मैं इसे स्थानीय रूप से डीबग नहीं कर सकता। मैंने पहले ही अपने b-navbar-toggle में एक खाली href="#" जोड़ने का प्रयास किया है, जैसा कि किसी अन्य सूत्र द्वारा बिना किसी भाग्य के सुझाया गया है।

मेरा नेवबार कोड इस प्रकार दिखता है। कोई अतिरिक्त सीएसएस जोड़ा नहीं गया है।

 <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>

नेवबार एंड्रॉइड, क्रोम, फायरफॉक्स और एज दोनों पर बिना किसी समस्या के काम करता है। क्या किसी को इस बात का अंदाजा है कि ऐसा क्यों हो रहा है?

0
Mikael 15 अप्रैल 2020, 14:54

1 उत्तर

सबसे बढ़िया उत्तर

display: flex; को display: webkit-box; में बदलने से Safari और iOS डिवाइस पर समस्या ठीक हो गई।

0
Mikael 30 अप्रैल 2020, 15:28