Я недавно столкнулся с этой странной проблемой при разработке моего стороннего проекта.Я добавил кнопку для выхода из системы в collapsible sidebar.Он отлично работает на ПК Chrome, но у него есть две странные проблемы с iOS Safari и iOS Chrome.Во-первых, при загрузке страницы на ios вы не увидите кнопку на боковой панели.Но если вы попытаетесь случайным образом прокрутить страницу вверх и вниз с открытой боковой панелью, кнопка волшебным образом отобразит sidebar.После закрытия боковой панели кнопка останется на главной странице (она должна быть скрыта вместе с боковой панелью).
Я не мог найти причину этих странных ошибок, поэтому я пишу здесь и надеюсь, что кто-то может помочь мне с ними.Любая помощь будет оценена!(Исходный код ниже)
Изображения:
Главная страница: https://imgur.com/2wLaWXK
Кнопка отсутствует: https://imgur.com/CxgYrXZ
После некоторой прокруткиПоявится: https://imgur.com/SVFZugN
После закрытия боковой панели кнопка останется над: https://imgur.com/nXGZgO8
Код:
<!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>
Исходный код (HTML)
Папка с файлами CSS
JSПапка с файлами