Web Analytics Made Easy -
StatCounter Overflow (scrollbar) glitching badly on mobile devices - CodingForum

Announcement

Collapse
No announcement yet.

Overflow (scrollbar) glitching badly on mobile devices

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Overflow (scrollbar) glitching badly on mobile devices

    First of all, notice that by "overflow" I mean the right side scroll bar as it is called "overflow" in CSS.

    On my website I have an issue with the overflow and mobile devices. I went into everything I could think of but I didn't find anything that could be related to the overflow "glitch". What do I mean by "glitch"? When you scroll all the way to the bottom of the page on a mobile device sometimes it jerks up to the top, not all the way to the top, only about 10 pixels or so.

    My website is here: https://www.mcpefun.com

    This is the page the page that mostly does it: https://www.mcpefun.com/query.php

    Also you must be on a mobile device for this to have. I wanna fix this issue as soon as possible because it might be annoying visitors on mobile devices.

    query.php HTML and CSS source:

    [/SPOILER]
    Code:
    #header {
    	position: fixed;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: 10%;
    }
    #body {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .animate-bottom {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }
    
    @-webkit-keyframes animatebottom {
        from { bottom:-100px; opacity:0 }
        to { bottom:0; opacity:1 }
    }
    
    @keyframes animatebottom {
        from{ bottom:-100px; opacity:0 }
        to{ bottom:0; opacity:1 }
    }
    
    body {margin:0; background: #FCFFF7;}
    ul.topnav {
        overflow: hidden;
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #E53D00;
    }
    
    ul.topnav li {
        float: left;
    }
    
    ul.topnav li a {
        display: inline-block;
        color: #FFF;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
    }
    
    ul.topnav li a:hover {
    background-color: #E5E5E5;
    }
    
    ul.topnav li.icon {
    display: none;
    }
    
    @media screen and (max-width:680px) {
        ul.topnav li:not(:first-child) {display: none;}
        ul.topnav li.icon {
            float: right;
            display: inline-block;
        }
    }
    
    @media screen and (max-width:680px) {
        ul.topnav.responsive {position: relative;}
        ul.topnav.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }
        ul.topnav.responsive li {
            float: none;
            display: inline;
        }
        ul.topnav.responsive li a {
            display: block;
            text-align: left;
        }
    }
    
    .loader {
        border: 10px solid #000;
        border-radius: 50%;
        border-top: 10px solid #E53D00;
        border-bottom: 10px solid #E53D00;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(720deg); }
    }
    
    .title
    {
        background: #FFF;
        color: gray;
        font-family: 'Helvetica', cursive;
    	border-top: solid 1px #E5E5E5;
        border-bottom: solid 1px #E5E5E5;
        font-size: 20px;
    	padding-top: 6px;
    }
    
    a
    {
        text-decoration: none;
        padding-left: 40px;
        color: gray;
    }
    
    .links
    {
        margin: 12px 0 0;
        height: 30px;
        padding: 9px;
        font-family: 'Helvetica', cursive;
        font-size: 16px;
        color: gray;
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        -moz-appearance: none;
        appearance: none;
        background-size: 11px 7px;
        outline: none;
    }
    
    .content
    {
        height: auto;
        margin-left: 230px;
        margin-right: 20px;
        padding: 20px 20px 30px;
    }
    
    .input
    {
        height: 40px;
        border: none;
        outline: none;
        background: #E5E5E5;
        text-align: center;
        color: gray;
    }
    
    .input2
    {
        height: 40px;
        width: 80px;
        border: none;
        outline: none;
        background: #E5E5E5;
        text-align: center;
        color: gray;
    }
    
    .input3
    {
        outline: none;
        height: 40px;
        border: none;
        background: #E5E5E5;
        text-align: center;
        color: gray;
    }
    Code:
    <html>
    <head>
        <title>MCPE Fun</title>
        <link rel="stylesheet" href="assets/style/style.css">
        <meta name="theme-color" content="#E53D00">
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
    </head>
    <body>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    
        function showContent()
        {
            $('#ldr').toggle();
            $('#ldb').toggle();
            $('#cnt').toggle();
        }
    
        setTimeout(showContent, 1000);
    
        $(document).ready(function()
        {
            var sq = $('#show_query');
            sq.click(function()
            {
                $('#query').toggle();
                var sqval = sq.attr('value');
                if(sqval === 'Show')
                {
                    sq.attr('value', 'Hide');
                }else if(sqval === 'Hide')
                {
                    sq.attr('value', 'Show');
                }
            })
        });
    </script>
    <script>
        /**
         * @param file
         * @returns {boolean}
         */
        function re(file)
        {
            window.history.pushState({}, '', file);
            window.onpopstate = location.reload();
            return false;
        }
    </script>
    <div id="header">
        <div style="background: #000;" align="center">
            <ul class="topnav" id="myTopnav">
                <li><a class="active" href="https://mcpefun.com">Mcpe Fun</a></li>
                <li><a href="" onclick="re('sub-domains.php')">Sub-domain Services</a></li>
                <li><a href="" onclick="re('command-runner.php')">CommandRunner</a></li>
                <li><a href="" onclick="re('community/')">Blog</a></li>
                <li><a href="" onclick="re('servers/')">Recommended Servers</a></li>
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px; background-color: #E53D00;" onclick="myFunction()">☰</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="body" align="center">
    <a href="https://mcpefun.com" style="color: gray;"><h1 style="font-size: 40px;">MCPE Servers</h1></a>
            <div class="title">
                <p>The Free Minecraft PE Server tools.</p>
            </div>
        <h1 style="font-size: 30px; color: gray;">
            Free Tools
        </h1>
        <div class="loader" id="ldr" align="center" style="color:gray;"></div>
        <h1 style="font-size: 30px; color: gray;" id="ldb">
            Loading...
        </h1>
        <div class="animate-bottom" id="cnt" hidden="hidden"><br>
            <p style="font-size: 20px; color: gray;">Server Query</p>
            <input type="button" id="show_query" class="input2" value="Hide"><br><br>
            <div id="query">
                <form method="get" action="#query">
                    <label>
                        <input type="text" name="ip" id="ip" placeholder="Server Address" class="input">
                    </label><br><br>
                    <label>
                        <input type="text" name="port" id="port" placeholder="Port" value="19132" class="input">
                    </label><br><br>
                    <input type="submit" value="Fetch" class="input2"><br>
                    <p style="color: gray;">
                        <?php
                        echo $re;
                        ?>
                    </p>
                </form>
            </div>
        </div>
    </div>
    <script src="https://cdn.smooch.io/smooch.min.js"></script>
    <script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/57e760700814cc34e171c0cf/default';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--script type='text/javascript'>
    (function(){
      var spoutjs=document.createElement('script'),firstjs=document.getElementsByTagName('script')[0];
      spoutjs.async=1;
      spoutjs.src='//cdn.spoutable.com/15f83ba0-e485-4626-bac1-1c56cf7c0e78/spoutable.js';
      firstjs.parentNode.insertBefore(spoutjs,firstjs)
    })();
    </script-->
    <!-- Go to www.addthis.com/dashboard to customize your tools -->
    <!--script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-57e8878ea9887805"></script-->
    
    </body>
    </html>
    [/SPOILER]
Working...
X