CODEWITHSUNDEEP
htmlioscsstwitter-bootstrap
Nate Lo
Nate Lo

Reputation: 151

Bootstrap button has weird behaviors only on ios safari and ios chrome

I recently ran into this weird problem when developing my side project. I added a button for logout purpose in the collapsible sidebar. It works perfectly on PC Chrome, but it has two weird issues on ios safari and ios chrome. First, when loading the page on ios, you won't see the button in the sidebar. But if you try to scroll the page up and down randomly with the sidebar opened, the button will appear in the sidebar magically. After closing the sidebar, the button will be left over in the main page (it is supposed to be hidden with the sidebar).

I couldn't find what caused these weird bugs, so I post here and hope that someone can help me with them. Any help will be appreciated! (Source code is down below)

Images:

Main Page: https://i.sstatic.net/DEj70.jpg

Button is missing: https://i.sstatic.net/Vil0I.jpg

After some scrolling it appears: https://i.sstatic.net/qcKD7.jpg

After closing the sidebar, the button will be left over: https://i.sstatic.net/09vBS.jpg

Code:

<!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">&#xf222; &#xf221;</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">&#xf2f5;</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>

Source Code (HTML)

CSS File Folder

JS File Folder

Upvotes: 6

Views: 4579

Answers (1)

j.gil
j.gil

Reputation: 197

Probably, this is because you have type = "button", just remove it, styles should load correctly.

I hope that I helped!

Upvotes: 16

Related Questions