'When I scroll a modal in mobile, an extra white space appears on the bottom of the page

html code

<button onclick="openModal()">Click</button>
    <div id="my-modal" class="modal">
      <span class="closed" onclick="closeModal()">
        <img
          src="img/close-left-product-ui-ux-design-cover.webp"
          style="width: 24px; height: 24px;"
          alt="close button"
          class="img-fluid"
        />
      </span>
      <div class="modal-content">
        <div class="my-slides">
          <img
            src="img/[email protected]"
            class="img-fluid"
            alt="demo product"
          />
        </div>
      </div>
    </div>

css code 

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

.modal-content {
  position: relative;
  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;
}

.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;
}

/* Media queries */

@media (min-width: 576px) and (max-width: 767px) {
  .modal-content {
    margin-left: 10px;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .modal-content {
    margin-left: 10px;
  }
}

JS code 

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";
}

When I scroll the modal in mobile, white space appears at the bottom initially. When I reach at a certain height, and again scroll the modal, it doesnt appear. I have seen some solutions regarding this but was not able to solve problem.

Here is the link https://pfs-r.netlify.app/

Please open it in mobile, then only you will see it.

javascripthtmlcssmodal-dialogbootstrap-modal


Solution 1:[1]

This problem appears when the URL bar hides, the height of the page is not the same.

For details see:

https://developers.google.com/web/updates/2016/12/url-bar-resizing

Otherwise you can put everything in one root fixed position div with height 100%.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 4b0

Related Questions