Can't click on browser vertical scrollbar because of a fullscreen fixed bootstrap modal

Question

I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:

.modal.show  {
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items: flex-start;
}

.modal-body {
  padding: 0;
  margin: 0;
}

.close {
  color: #aaa;
  position: absolute;
  /* background: blue !important; */
  border: 0;
  top: 0;
  z-index: 99999;
  right: 3%;
  float: none;
  opacity: 1;
  font-size: 40px;
  font-weight: 400;
}

.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}

.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}

.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

.modal-fullscreen {
  background: #fff;
    min-width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
    width: 100%;
  }
}

.modal-dialog {
  position:fixed;
  padding: 0;
  max-width: 100%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow:auto;
}

When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !

Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.

Here a jsfiddle to see a live demo of the problem: https://jsfiddle.net/odbjcpt2/1/

I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).

Thank you

user_1246574 · Answer

In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.

EDIT

I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.

Below is from bootstrap doc

Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.

After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.

EDIT AGAIN

I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal

Can't click on browser vertical scrollbar because of a fullscreen fixed bootstrap modal

1 Answers