Nat*_* Lo 6 html css ios twitter-bootstrap
我最近在开发我的副项目时遇到了这个奇怪的问题。我在 .txt 文件中添加了一个用于注销目的的按钮collapsible sidebar。它在 PC Chrome 上完美运行，但在 ios safari 和 ios chrome 上有两个奇怪的问题。首先，在ios上加载页面时，您不会在侧边栏中看到该按钮。但是，如果您尝试在侧边栏打开的情况下随机上下滚动页面，该按钮就会神奇地出现sidebar。关闭侧边栏后，该按钮将保留在主页中（它应该与侧边栏一起隐藏）。
我找不到导致这些奇怪错误的原因，所以我在这里发帖并希望有人可以帮助我解决这些问题。任何帮助将不胜感激！（源代码在下面）
图片：
主页： https: //i.stack.imgur.com/DEj70.jpg
按钮丢失： https: //i.stack.imgur.com/Vil0I.jpg
滚动一段时间后，出现： https ://i.stack.imgur.com/qcKD7.jpg
关闭侧边栏后，按钮将被保留： https ://i.stack.imgur.com/09vBS.jpg
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Chickvago</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/TWNateLo/NCKU-AI-Course/b1b6c4c3/Front%20End/Deploy/css/Main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<link rel="icon" href="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
</head>
<body>
<div class="wrapper" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div id="dismiss">
<i class="fas fa-times"></i>
</div>
<div class="sidebar-header">
<!-- change to index.php if page is not index.php -->
<h3>Chickvago</h3>
</div>
<ul class="list-unstyled">
<!--<ul class="list-unstyled components"> -->
<p style="margin-bottom: 0px;">Hi, #Username <span class="gender-icon"> </span></p>
<li class="active">
<a href="#" id="dismissT">Chick</a>
</li>
<li>
<a href="#">Status</a>
</li>
<li>
<a href="#">Friends <span class="badge badge-pill badge-info">3</span></a>
</li>
<li>
<a href="#">Tutorial</a>
</li>
<!-- collapse button template -->
<!--
<li>
<a href="#">About</a>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>
-->
<!-- collapse button template -->
</ul>
<div class="container-fluid" style="position: fixed; top: 85%;">
<div class="row">
<div class="col" style="position: relative; max-width: 250px;">
<button type="button" class="btn btn-secondary btn-block" data-toggle="modal" data-target="#LogoutModal"><span class="gender-icon"></span> Logout</button>
</div>
</div>
</div>
</nav>
</div>
<!-- Page Content Holder -->
<div id="content">
<!-- Top Nav Bar + Toggle Button -->
<div class="container-fluid navbar-wrapper">
<nav class="navbar navbar-default">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn btn-nav">
<i class="fas fa-bars"></i>
<span></span>
</button>
<a class="navbar-brand mx-auto navbar-brand-centered" href="#">
<img class="nav-brand-size" src="./image/chick.svg" alt="Logo">
</a>
</nav>
</div>
<!-- /Top Nav Bar + Toggle Button -->
<div class="container-fluid">
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
<p>test for scrolliung test for scrolling</p>
</div>
</div>
<div class="overlay"></div>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Font Awesome 5 JS SVG Version -->
<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#dismissT, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').fadeOut();
});
$('#dismiss, .overlay').on('click', function () {
$('#sidebar').removeClass('active');
$('.overlay').fadeOut();
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar').addClass('active');
$('.overlay').fadeIn();
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
/*window.FontAwesomeConfig = {
searchPseudoElements: true
}*/
</script>
</body>