iPhone 6+ Mobile safari iOS 8 Landscape with tabs open and Bootstrap navbar-fixed-top 在打开时不会关闭
Posted
技术标签:
【中文标题】iPhone 6+ Mobile safari iOS 8 Landscape with tabs open and Bootstrap navbar-fixed-top 在打开时不会关闭【英文标题】：iPhone 6+ Mobile safari iOS 8 landscape with tabs open and Bootstrap navbar-fixed-top will not close when open 【发布时间】：2015-04-21 19:07:02 【问题描述】：我在 ios 8 上使用 iPhone 6+ 的横向移动 safari 时遇到了 Bootstraps navbar-fixed-top 的错误。该错误仅在其他选项卡打开时发生。
这里是如何复制它： 1) 在 iPhone 6+ 上以横向方式转到 http://getbootstrap.com/examples/navbar-fixed-top/ - 确保您打开了另一个选项卡 2) 向下滚动页面而不打开折叠 3) Safari 的状态栏（网址和标签）消失后，打开导航栏 4) 向上滚动，以便 Safari 的带有标签的状态栏重新出现 5）尝试关闭导航栏。
我在 iOS 7 中遇到了这个错误，但能够通过添加视口最小用户界面元来修复它。我已经使用最新版本的 iOS 8 测试了我的 iPhone 6+ 和 6+ iPhone 模拟器。似乎应该归咎于标签，因为常规 iPhone 6 没有这个问题，因为标签没有显示在状态栏上.我想这个错误不仅限于 Bootstrap，而且适用于顶部的任何固定元素。
<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" 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 & 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" 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" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">News & 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" 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" 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" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown ">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Research & 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" 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 & Building</a>
</li>
<li class="">
<a href="/department-resources/hosting-visitors" role="menuitem">Hosting Speakers & 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" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown last-li">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" role="button" aria-expanded="false">Friends & 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>我还没有找到解决办法。有什么想法吗？
【问题讨论】：
【参考方案1】：如果我理解正确，只要打开横向选项卡就会出现此问题。您将无法打开/或关闭移动菜单。
我设法通过解决方法修复它：
-
制作一个绝对定位的 div（在这种情况下，id 为 #ios_menu_fix），其大小与切换按钮的大小差不多。
在 css 中将它与切换按钮在固定导航菜单中的位置对齐。确保它有 z-index 集和 -webkit-transform: translate3d(0,0,0);修复向上滚动时的 ios z-index 问题。
每次滚动页面时，将顶部设置为页面滚动高度，如下所示：
$(window).on('scroll',function()
$("#ios_menu_fix").css("top", $(document).scrollTop()+"px");
);
单击#ios_menu_fix 时打开/关闭菜单
$(".nav-collapse").collapse('hide');
$(".nav-collapse").collapse('show');
您可以像这样检查菜单是否打开：
var toggle = $(".nav-collapse").is(":visible");
if (toggle)
$(".nav-collapse").collapse('hide');
else
$(".nav-collapse").collapse('show');
这是一个丑陋的解决方案，但我目前发现的唯一一个不会破坏其他移动浏览器和布局的工作。
这些代码示例使用 JQuery。
【讨论】：
以上是关于iPhone 6+ Mobile safari iOS 8 Landscape with tabs open and Bootstrap navbar-fixed-top 在打开时不会关闭的主要内容，如果未能解决你的问题，请参考以下文章
您可以从 Mobile Safari 访问 iPhone 相机吗？ [关闭]
为啥在 iOS Safari Mobile (iPhone / iPad) 中没有触发模糊事件？
CSS 背景位置在 Mobile Safari (iPhone/iPad) 中不起作用