title: A white box appears when scrolling in google chrome on mobile
body: <p>I am working on a website. <a href="https://vaibhavacharya.github.io" rel="nofollow noreferrer">Link to website</a>. You can see the code on Github. <a href="https://github.com/VaibhavAcharya/vaibhavacharya.github.io" rel="nofollow noreferrer">Link to code</a>.
  If you don't want to do that here is HTML and CSS.<br>
  HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"&gt;
      &lt;link rel="stylesheet" href="Assets/Style.css"&gt;
      &lt;title&gt;Vaibhav Acharya&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="notsp"&gt;Sorry! Your device is not supported. Try on a device with bigger width/height.&lt;/div&gt;
      &lt;div class="blur"&gt;
              &lt;div class="mobnav"&gt;
                      &lt;div class="mbtn mhomeI mactive" onclick="home()"&gt;Home&lt;/div&gt;
                      &lt;div class="mbtn maboutI" onclick="about()"&gt;About&lt;/div&gt;
                      &lt;div class="mbtn mcontactI" onclick="contact()"&gt;Contact&lt;/div&gt;
                      &lt;a href="Blog/index.html"&gt;&lt;div class="mbtn"&gt;Blog&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="title"&gt;&lt;span&gt;Vaibhav Acharya&lt;/span&gt;&lt;/div&gt;
      &lt;nav&gt;
          &lt;div class="btn homeI active" onclick="home()"&gt;&lt;span class="fa fa-home"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="btn aboutI" onclick="about()"&gt;&lt;span class="fa fa-info"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="btn contactI" onclick="contact()"&gt;&lt;span class="far fa-address-book"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;a href="Blog/index.html"&gt;&lt;div class="btn"&gt;&lt;span class="far fa-newspaper"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/nav&gt;
      &lt;div class="containers" id="home"&gt;
          &lt;div class="heading"&gt;Home&lt;/div&gt;
          Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
      &lt;/div&gt;
      &lt;div class="containers" id="about"&gt;
          &lt;div class="heading"&gt;About&lt;/div&gt;
          Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
      &lt;/div&gt;
      &lt;div class="containers" id="contact"&gt;
          &lt;div class="heading"&gt;Contact&lt;/div&gt;
          Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
      &lt;/div&gt;
      &lt;div class="foot"&gt;&amp;copy Vaibhav Acharya 2018&lt;/div&gt;
      &lt;div class="mobnavbtn" onclick="mobNav()"&gt;&lt;span class="fa fa-bars"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;script src="Assets/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="Assets/Script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=K2D:100');
  html, body{
      margin: 0%;
      padding: 0%;
      max-width: 100%;
  }
  body{
      background: linear-gradient(294deg, #9C27B0, #303F9F);
      background-attachment: fixed;
      color: white;
      font-family: 'K2D','Open Sans', sans-serif;
  }
  .notsp{
      display: none;
  }
  a{
      text-decoration: none;
      color: currentColor;
  }
  .blur{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0,0,0,0.8);
      z-index: 2;
      display: none;
  }
  .title{
      font-size: 2em;
      font-weight: 900;
      display: block;
      text-align: center;
      padding: 15px;
  }
  .title span{
      background-color: rgba(255,255,255,0.6);
      padding: 5px;
      border-radius: 10px;
      border-left: 10px solid rgba(255,255,255,0.6);
      cursor: pointer;
  }
  nav{
      display: block;
      margin: 0px;
      padding: 0px;
      text-align: center;
  }
  .btn{
      display: inline-block;
      font-size: 3em;
      padding: 5px;
      padding-left: 50px;
      padding-right: 50px;
      transition: 0.5s all ease;
      opacity: 0.3;
      cursor: pointer;
  }
  .btn:hover{
      opacity: 1;
  }
  .active{
      text-shadow: 0 0 016px white;
      opacity: 1;
  }
  .containers{
      background-color: rgba(255,255,255,0.4);
      min-height: 50vh;
      display: block;
      padding: 20px;
      font-size: 1.3em;
  }
  #about, #contact{
      display: none;
  }
  .heading{
      display: block;
      font-size: 2em;
      text-align: center;
      margin: 0px;
      padding: 10px;
      padding-top: 0px;
  }
  .foot{
      display: block;
      text-align: center;
      padding: 10px;
  }
  .mobnavbtn{
      position: fixed;
      bottom: 0;
      right: 0;
      background: linear-gradient(294deg, #9C27B0, #303F9F);
      z-index: 3;
      margin: 10px;
      padding: 15px;
      border-radius: 40%;
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      cursor: pointer;
      display: none;
  }
  .mobnav{
      margin: 0px;
      padding: 0px;
  }
  .mbtn{
      display: block;
      padding: 5px;
      margin: 0px;
      font-size: 3.5em;
      text-align: center;
      background-color: rgba(255,255,255,0.6);
      cursor: pointer;
  }
  .mactive{
      background: linear-gradient(294deg, #9C27B0, #303F9F);
  }
  @media only screen and (max-width: 630px){
      nav{
          display: none;
      }
      .mobnavbtn{
          display: block;
      }
  }
  @media only screen and (max-width: 319px){
      div:not(.notsp), nav{
          display: none;
      }
      .notsp{
          display: block;
      }
  }
  @media only screen and (max-height: 550px){
      div:not(.notsp), nav{
          display: none;
      }
      .notsp{
          display: block;
      }
  }
  </code></pre>
  
  <p><br>
  So when i try to scroll it on mobile(Google Chrome) a white box appears on bottom of page. It disappears when i take my finger off screen.
  Here is a image:
  <a href="https://i.stack.imgur.com/bDxa8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bDxa8.jpg" alt="enter image description here"></a>
  I want to know why it happens and how to remove it?</p>