iPhone 6+ Mobile safari iOS 8 paisagem com abas abertas e Bootstrap navbar-fixed-top não fechará quando abrir

9

Eu encontrei um bug com Bootstraps navbar-fixed-top com o safari móvel do iPhone 6 + na paisagem no iOS 8. O bug só acontece com outras abas abertas.

Veja como replicá-lo:
1) Vá para link no seu iPhone 6+ na paisagem - certifique-se de ter uma outra guia aberta
2) Role a página sem abrir o colapso
3) Quando a barra de status do Safari (a url e as guias) desaparecerem, abra a barra de navegação 4) Rolar de volta para cima para que a barra de status do Safari com abas volte para cima
5) Tente fechar a barra de navegação.

Eu tive esse bug no iOS 7, mas consegui consertá-lo adicionando o viewport minimal-ui meta. Testei meu iPhone 6+ e o 6+ simulador de iPhone com a versão mais recente do iOS 8. Parece que as guias são responsáveis, pois o iPhone 6 normal não tem esse problema porque as guias não são exibidas na barra de status . Eu imagino que esse bug vá além do Bootstrap, mas se aplica a qualquer elemento fixo no topo.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><linkhref="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>

Ainda não encontrei um trabalho. Alguma idéia?

    
por Jacob Hyde 21.04.2015 в 21:07
fonte

1 resposta

2

Se eu entendi, corrija esse problema sempre que as guias de paisagem estiverem abertas. Você não poderá abrir ou fechar o menu móvel.

Consegui corrigi-lo com uma solução alternativa:

  1. Faça uma div absoluta posicionada (com id #ios_menu_fix neste caso) sobre o tamanho do botão de alternância.
  2. Em css, alinhe-o onde o botão de alternância estaria no menu de navegação fixo. Certifique-se de que ele tenha z-index set e também -webkit-transform: translate3d (0,0,0); para corrigir o problema ios z-index ao rolar para cima.
  3. Sempre que a página é rolada, defina a altura rolada de cima para página da seguinte forma:

    $(window).on('scroll',function() {
    $("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
    }); 
    
  4. Abra / feche o menu quando #ios_menu_fix for clicado

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

Você pode verificar se o menu está aberto da seguinte forma:

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

É uma solução feia, mas a única que atualmente vejo funcionando não quebra outros navegadores e layouts para dispositivos móveis.

Esses exemplos de código usam o JQuery.

    
por Ectizoi 04.07.2015 / 16:20
fonte