1

This is very weird behavior that I can't explain so I have made a CodePen: link. I am trying to make it so that a modal div with fixed position takes up the entirety of the viewport when it appears on screen but, somehow, the backdrop-filter property of the parent div is interfering with this.

HTML

<div class="container">
  <button onclick="myFunction()">Open modal</button>
  <div id="modal">
    <div class="content">
      <p>Comment out the 'backdrop-filter' property on the container and notice how the modal changes</p>
      <button onclick="myFunction()">Close modal</button>
    </div>
  </div>
</div>

CSS

body {
  background-color: #BFBFFF;
}

.container {
  font-size: 2rem;
  max-width: 1000px;
  margin: 0 auto 100px auto;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
  border-radius: 10px;
  padding: 15px;
  height: 200vh;
  position: absolute;
  top: 0;
  width: 80%;
  left: 20%;
  backdrop-filter: blur(4px);
}

#modal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  display: none;
}

.content {
  position: absolute;
  background-color: white;
  padding: 15px;
  width: 900px;
  border-radius: 10px;
}

JS

function myFunction() {
  var x = document.getElementById("modal");
  if (x.style.display === "none") {
    x.style.display = "grid";
  } else {
    x.style.display = "none";
  }
}
Alberto Vilches
  • 303
  • 1
  • 5
  • 16

1 Answers1

2

This question has already been asked
https://stackoverflow.com/a/52937920/15859431

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

Xiao_e_yun
  • 188
  • 1
  • 10