iPhone 6+ Safari mobile iOS 8 orizzontale con schede aperte e Bootstrap navbar-fisso-top non si chiude quando aperto

Ho incontrato un bug con Bootstraps navbar-fixed-top con il safari mobile di iPhone 6 + in orizzontale su iOS 8. L'errore si verifica solo con altre schede aperte.iPhone 6+ Safari mobile iOS 8 orizzontale con schede aperte e Bootstrap navbar-fisso-top non si chiude quando aperto

Ecco come replicarlo:
1) Vai http://getbootstrap.com/examples/navbar-fixed-top/ sul vostro iPhone 6+ nel paesaggio - essere sicuri di avere un altro scheda aperta
2) Scorrere la pagina senza aprire il crollo
3) Una volta che la barra di stato di Safari (l'url e le schede) scompare, apri la barra di navigazione
4) Torna indietro in modo che la barra di stato di Safari con le schede ritorni indietro
5) Prova a chiudere la barra di navigazione.

Ho avuto questo errore in iOS 7, ma è stato in grado di risolverlo aggiungendo il meta della vista minimal-ui meta. Ho testato il mio iPhone 6+ e il simulatore iPhone 6+ con l'ultima versione di iOS 8. Sembra che le schede siano da biasimare dal momento che il normale iPhone 6 non ha questo problema perché le schede non vengono visualizzate nella barra di stato . Immagino che questo bug vada oltre il solo Bootstrap, ma si applica a qualsiasi elemento fisso in alto.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="to-sticky navbar-fixed-top"> 
 
    <div class="nav-container"> 
 
    <div class="navbar"> 
 
     <div class="navbar-header"> 
 
     <a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
     Main Menu 
 
    </a> 
 
     </div> 
 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <ul class="nav navbar-nav" role="menubar"> 
 
      <!--unless submenu--> 
 
      <li class="active nav-home first-li "> 
 
      <a href="/" role="menuitem">Home</a> 
 
      </li> 
 
      <li class="nav-dot nav-home"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">About<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/about" role="menuitem">Chair's Welcome</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/history" role="menuitem">History</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/campbell-hall" role="menuitem">Campbell Hall</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/faqs" role="menuitem">FAQs</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/jobs-and-fellowships" role="menuitem">Jobs &amp; Fellowships</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/integrity-statement" role="menuitem">Integrity Statement</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/about/contact" role="menuitem">Contact</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">People<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class="hidden-xs dropdown-submenu"> 
 
       <a href="/people/faculty" role="menuitem">Faculty<b class="caret"></b></a> 
 
       </li> 
 
       <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation --> 
 
       <li class="visible-xs dropdown-submenu"> 
 
       <a href="#" class="trigger">Faculty<b class="caret"></b></a> 
 
       <ul class="dropdown-menu sub-menu" role="menu"> 
 
        <li class=" "><a href="/people/faculty/current" role="menuitem">Current</a> 
 
        </li> 
 
        <li class=" "><a href="/people/faculty/emeriti" role="menuitem">Emeriti</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/people/researchers" role="menuitem">Researchers</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/people/postdocs" role="menuitem">Postdocs</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/people/visiting-scholars" role="menuitem">Visiting Scholars</a> 
 
       </li> 
 
       <li class="hidden-xs dropdown-submenu"> 
 
       <a href="/people/graduate-students" role="menuitem">Graduate Students<b class="caret"></b></a> 
 
       </li> 
 
       <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation --> 
 
       <li class="visible-xs dropdown-submenu"> 
 
       <a href="#" class="trigger">Graduate Students<b class="caret"></b></a> 
 
       <ul class="dropdown-menu sub-menu" role="menu"> 
 
        <li class=""><a href="/people/graduate-students/current" role="menuitem">Current</a> 
 
        </li> 
 
        <li class=""><a href="/people/graduate-students/alumni" role="menuitem">Alumni</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/people/staff" role="menuitem">Staff</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">News &amp; Events<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/news" role="menuitem">Department News</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/news/events" role="menuitem">Department Events</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="http://events.berkeley.edu/index.php/calendar/sn/astro" role="menuitem" class="external" target="_blank">Campus Calendar</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/news/newsletters" role="menuitem">Newsletters</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Academic Programs<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class="hidden-xs dropdown-submenu"> 
 
       <a href="/programs/undergraduate-program" role="menuitem">Undergraduate<b class="caret"></b></a> 
 
       </li> 
 
       <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation --> 
 
       <li class="visible-xs dropdown-submenu"> 
 
       <a href="#" class="trigger">Undergraduate<b class="caret"></b></a> 
 
       <ul class="dropdown-menu sub-menu" role="menu"> 
 
        <li class=""><a href="/programs/undergraduate-program" role="menuitem">Undergraduate Overview</a> 
 
        </li> 
 
        <li class=""><a href="/programs/undergraduate-program/astrophysics-major" role="menuitem">Requirements of the Astrophysics Major</a> 
 
        </li> 
 
        <li class=""><a href="/programs/undergraduate-program/astrophysics-declaration" role="menuitem">Declaring the Major</a> 
 
        </li> 
 
        <li class=""><a href="http://admissions.berkeley.edu" role="menuitem" class="external" target="_blank">How to Apply</a> 
 
        </li> 
 
        <li class=""><a href="/programs/undergraduate-program/undergraduate-resources" role="menuitem">Undergraduate Resources</a> 
 
        </li> 
 
        <li class=""><a href="/programs/undergraduate-program/undergraduate-student-learning-initiative" role="menuitem">Undergraduate Student Learning Initiative</a> 
 
        </li> 
 
        <li class=""><a href="/programs/undergraduate-program/policy-on-academic-misconduct" role="menuitem">Policy on Academic Misconduct</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li class="hidden-xs dropdown-submenu"> 
 
       <a href="/programs/graduate-program" role="menuitem">Graduate<b class="caret"></b></a> 
 
       </li> 
 
       <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation --> 
 
       <li class="visible-xs dropdown-submenu"> 
 
       <a href="#" class="trigger">Graduate<b class="caret"></b></a> 
 
       <ul class="dropdown-menu sub-menu" role="menu"> 
 
        <li class=""><a href="/programs/graduate-program" role="menuitem">Graduate Overview</a> 
 
        </li> 
 
        <li class=""><a href="/programs/graduate-program/graduate-requirements" role="menuitem">Degree Requirements</a> 
 
        </li> 
 
        <li class=""><a href="/programs/graduate-program/graduate-apply" role="menuitem">How to Apply</a> 
 
        </li> 
 
        <li class=""><a href="/programs/graduate-program/graduate-resources" role="menuitem">Graduate Resources</a> 
 
        </li> 
 
        <li class=""><a href="/programs/graduate-program/teaching-opportunities" role="menuitem">Teaching Opportunities</a> 
 
        </li> 
 
        <li class=""><a href="/programs/graduate-program/student-services" role="menuitem">Student Services</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li class="hidden-xs dropdown-submenu"> 
 
       <a href="/courses" role="menuitem">Courses<b class="caret"></b></a> 
 
       </li> 
 
       <!-- if submenu. repeats previous code but this will show ONLY on MOBILE to expose third tier navigation --> 
 
       <li class="visible-xs dropdown-submenu"> 
 
       <a href="#" class="trigger">Courses<b class="caret"></b></a> 
 
       <ul class="dropdown-menu sub-menu" role="menu"> 
 
        <li class=" 
 
                  
 
                  active 3"> 
 
        <a href="/courses/undergraduate/2015/SU" role="menuitem"> 
 
                  
 
                  Summer 
 
                  
 
                  2015 
 
                  • Undergraduate 
 
                  </a> 
 
        </li> 
 
        <li class=" 
 
                  
 
                  "> 
 
        <a href="/courses/undergraduate/2015/SP" role="menuitem"> 
 
                  Spring 
 
                  
 
                  
 
                  2015 
 
                  • Undergraduate 
 
                  </a> 
 
        </li> 
 
        <li class=" 
 
                  
 
                  active 3"> 
 
        <a href="/courses/graduate/2015/SU" role="menuitem"> 
 
                  
 
                  Summer 
 
                  
 
                  2015 
 
                  • Graduate 
 
                  </a> 
 
        </li> 
 
        <li class=" 
 
                  
 
                  "> 
 
        <a href="/courses/graduate/2015/SP" role="menuitem"> 
 
                  Spring 
 
                  
 
                  
 
                  2015 
 
                  • Graduate 
 
                  </a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/programs/financial-aid" role="menuitem">Financial Aid</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/programs/student-awards" role="menuitem">Student Prizes and Awards</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Prospective Students<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/prospective-students" role="menuitem">Why Berkeley Astronomy</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/prospective-students/tuition" role="menuitem">Tuition</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/prospective-students/unex-and-summer-sessions" role="menuitem">UNEX and Summer Sessions</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/prospective-students/about-berkeley" role="menuitem">About Berkeley</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/prospective-students/diversity-statement" role="menuitem">Statement on Diversity</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Research &amp; Facilities<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/research-facilities" role="menuitem">Facilities</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/research-facilities/organized-research-units" role="menuitem">Organized Research Units</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/research-facilities/research-opportunities" role="menuitem">Research Opportunities</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/research-facilities/projects" role="menuitem">Projects</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/research-facilities/labs" role="menuitem">Labs</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/research-facilities/libraries" role="menuitem">Libraries</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown "> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Department Resources<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/department-resources" role="menuitem">Forms and Documents</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/astronomy-computing-services" role="menuitem">Computing at Berkeley Astronomy</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/campus-services" role="menuitem">Campus Shared Services</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/access-and-building" role="menuitem">Access &amp; Building</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/hosting-visitors" role="menuitem">Hosting Speakers &amp; Visitors</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/building-procedures" role="menuitem">Building Procedures</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/department-resources/campus-resources" role="menuitem">Campus Resources</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="nav-dot"> 
 
      <img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation"> 
 
      </li> 
 
      <!--if submenu--> 
 
      <li class="dropdown last-li"> 
 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Friends &amp; Fans<b class="caret"></b></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li class=""> 
 
       <a href="/astronomy-fans" role="menuitem">Outreach</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/astronomy-fans/make-a-gift" role="menuitem">Make A Gift</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/astronomy-fans/ask-an-astronomer" role="menuitem">Ask an Astronomer</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/astronomy-fans/local-resources" role="menuitem">Local Resources</a> 
 
       </li> 
 
       <li class=""> 
 
       <a href="/astronomy-fans/merchandise" role="menuitem">Department Merchandise</a> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     <form action="/search" class="search_form visible-xs navbar-form navbar-right" method="post" role="search"> 
 
      <div class="input-group"> 
 
      <input class="form-control input-sm search_text" name="search_text" type="text" placeholder=""> 
 
      <span class="input-group-btn"> 
 
       <button type="submit" class="btn btn-color btn-sm"><span class="glyphicon glyphicon-search"></span><span class="sr-only">Search</span> 
 
      </button> 
 
      </span> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

devo ancora trovare un lavoro in giro. Qualche idea?

fonte

2015-04-21 Jacob Hyde

Se ho capito, questo problema si presenta ogni volta che le schede orizzontale sono aperte. Non sarà possibile aprire o chiudere il menu del cellulare.

sono riuscito a risolvere il problema con una soluzione:

Fai div posizionato assoluto (con id #ios_menu_fix in questo caso) circa la dimensione del pulsante di commutazione.
In css allinearlo in cui il pulsante di attivazione/disattivazione si troverebbe nel menu di navigazione fisso. Assicurati che abbia impostato z-index e anche -webkit-transform: translate3d (0,0,0); per risolvere il problema di ios z-index durante lo scorrimento.
Ogni pagina viene fatto scorrere il tempo impostare la parte superiore alla pagina altezza scorrere in questo modo:
```
$(window).on('scroll',function() { 
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px"); 
}); 
```

aprire/chiudere il menu quando si fa cliC#ios_menu_fix

$(".nav-collapse").collapse('hide'); 
$(".nav-collapse").collapse('show');

È possibile controllare se il menu è aperto in questo modo:

var toggle = $(".nav-collapse").is(":visible"); 
    if (toggle) { 
     $(".nav-collapse").collapse('hide'); 
    } 
    else { 
     $(".nav-collapse").collapse('show'); 
    }

È una brutta soluzione ma l'unica che attualmente trovo funzionante non infrange altri browser e layout per dispositivi mobili.

Questi esempi di codice utilizzano JQuery.

fonte

2015-07-04 14:20:41 Ectizoi

iPhone 6+ Safari mobile iOS 8 orizzontale con schede aperte e Bootstrap navbar-fisso-top non si chiude quando aperto

risposta

Problemi correlati