In mobile devices using chrome in android, when I scroll down the modal and the address bar disappears, white space appears at the bottom

user_9580775 0
Viewed 1429

function openModal() {
  document.getElementById("my-modal").style.display = "block";
  document.querySelector("nav").style.display = "none";
  document.querySelector("body").style.overflow = "hidden";
}
function closeModal() {
  document.getElementById("my-modal").style.display = "none";
  document.querySelector("nav").style.display = "block";
  document.querySelector("body").style.overflow = "auto";
}
html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  margin-top: 55px;
  border-radius: 4px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 1000px;
  border: none;
  background-color: #fff;
  height: max-content;
  margin-bottom: 50px;
  box-sizing: border-box;
}

.my-slides {
  width: 100%;
}

.my-slides img {
  width: 100%;
}

.closed {
  position: fixed;
  top: 30px;
  right: 25px;
  font-size: 48px;
  font-weight: bold;
  transition: 0.3s ease;
}

.closed:hover,
.closed:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.prev {
  cursor: pointer;
  position: fixed;
  top: 50%;
  left: 8%;
  width: auto;
  padding: 16px;
  color: #fff !important;
  font-weight: bold;
  font-size: 3em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  cursor: pointer;
  position: fixed;
  top: 50%;
  right: 8%;
  width: auto;
  padding: 16px;
  color: #fff !important;
  font-weight: bold;
  font-size: 3em;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 3px 0 0 3px;
}


/* Media queries */

@media (min-width: 768px) and (max-width: 992px) {
  .prev {
    left: 7%;
  }
  .next {
    right: 7%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .prev {
    display: none;
  }
  .next {
    display: none;
  }
  .modal-content {
    margin-left: 10px;
    width: 80%;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .prev {
    display: none;
  }
  .next {
    display: none;
  }
  .modal-content {
    margin-left: 10px;
    width: 80%;
  }
}
<div id="my-modal" class="modal">
  <!-- close button -->
  <span class="closed" onclick="closeModal()">
        <img
          data-src="img/close-left-product-ui-ux-design-cover.webp"
          style="width: 24px; height: 24px;"
          alt="close button"
          class="img-fluid lazyload"
        />
      </span>
  <!-- content for modal -->
  <div class="modal-content">
    <!-- Images for modal -->
    <div class="my-slides">
      <!-- <div class="numbertext">1/15</div> -->
      <img data-src="img/ecolight-product-ui-ux-design-full@3x.webp" class="img-fluid lazyload" alt="ecolight product" />
    </div>
    <div class="my-slides">
      <!-- <div class="numbertext">1/15</div> -->
      <img data-src="img/demo-product-ui-ux-design-cover-full@3x.webp" class="img-fluid lazyload" alt="demo product" />
    </div>
  </div>
  <!-- Next and previous buttons -->
  <a class="prev" onclick="changeSlides(-1)">
    <img data-src="img/left-product-ui-ux-design-cover.webp" style="width: 40px; height: 40px;" class="img-fluid lazyload" alt="previous button" />
  </a>
  <a class="next" onclick="changeSlides(1)">
    <img data-src="img/right-product-ui-ux-design-cover.webp" class="img-fluid lazyload" style="width: 40px; height: 40px;" alt="next button" />
  </a>
</div>

In mobile devices using chrome in android, when I scroll down the modal and the address bar disappears, white space appears at the bottom. This does not happen with any other browsers such as mozilla firefox, mi browser in android. It's just when address bar disappears, white space appears.

Here is the screenshot of an issue that I am facing.

enter image description here

The one with the red border is the white space that occurs when I scroll in chrome android.

twitter-bootstrap css html jquery javascript
2 Answers

I think in't an little issue of a 100vh on some mobile browsers. 100vh - is 100% of a current viewport (all you can see on your screen). Sometimes it's a little bit unstable on mobile browsers while you scrolling up and down and the height of a browser changing dynamically due to navbar/addressbar hiding/appearing.

Try to change following setting

body {
  min-height: 100%; /* on your example link it is 100hv, make it 100% */
}
.modal {
  min-height: 100%; /* the element is fixed, it will work hike whith 100%; */
}

If this wouldn't help - please, make a screenshot of an issue.

user_31871270

I fixed this in my case by using height: -webkit-fill-available instead of height: 100vh on mobile devices. But you have to find which div you have to set. It's quite tricky when you have more inner divs.

user_38558910
Related