我正在尝试使用 Bootstrap 4 关闭 Canvas 菜单，如图所示 in this example - 在 iOS 10.3 Safari 中，当关闭菜单时隐藏，但随后打开而不是向左滑动只是部分方式 - 屏幕抓取显示它打开。适用于 Mac Safari 和 Windows 浏览器。
我在 caniuse 中查找了大部分 CSS，一切似乎都适合我的 Safari。
下面的代码(示例的简化版本)
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Offcanvas template for Bootstrap</title>
<link href="bootstrap4_dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap4_dist/css/SAVEoffcanvas.css?v=4" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div style='width:100%;height: 100%; background-color: red;margin-top:20px; padding:20px;'>content</div>
</main>
<script src="bootstrap4_dist/js/jquery-slim.min.js"></script>
<script src="bootstrap4_dist/js/bootstrap.bundle.min.js"></script>
<script src="bootstrap4_dist/js/offcanvas.js"></script>
</body>
</html>
CSS
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 56px;
}
@media (max-width: 767.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
background-color: var(--gray-dark);
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.offcanvas-collapse.open {
-webkit-transform: translateX(-1rem);
transform: translateX(-1rem); /* Account for horizontal padding on navbar */
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: var(--secondary);
}
.nav-underline .nav-link:hover {
color: var(--blue);
}
.nav-underline .active {
font-weight: 500;
color: var(--gray-dark);
}
.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: var(--purple); }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
JQUERY $(函数(){ '使用严格'
$('[data-toggle="offcanvas"]').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
})
最佳答案
通过将 left:0 添加到媒体查询类使其工作:
@media (max-width: 767.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
left:0,
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
background-color: var(--gray-dark);
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.offcanvas-collapse.open {
-webkit-transform: translateX(-1rem);
transform: translateX(-1rem); /* Account for horizontal padding on navbar */
}
}
关于css - Bootstrap 4 关闭 Canvas 菜单不适用于 iOS Safari，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48691498/