Why backdrop filter: blur(5px) is breaking my design?

Question

Today I am facing a vey weird issue in css backdrop-filter: blur(7px);

First look at first snippet

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  /* position: absolute; */
  /* width: 50%; */
  bottom: 150px;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}

<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

as You are seeing there are 3 containers . every container have a blurred container by backdrop-filter: blur(7px);

but 2nd container's blurred element is overflowing the parent .

Till now everything is working fine .

First weird thing

by positioning absolute and moving overflowing container towards bottom , it is just lying under the 3rd containers blurred element while it should be at the top of that blurred element

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
 bottom: -142px;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}

<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

to see the result please reset the bootom css attribute of .bug class according to your browser

How it's gone

I just removed the backdrop-filter property from 3 blurred container .

to see the result please reset the bootom css attribute of .bug class according to your browser

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  /* -webkit-backdrop-filter: blur(7px); */
  /* backdrop-filter: blur(7px); */
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
  bottom: 24%;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}

<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

Another weird thing with backdrop filter is --

with backdrop filter the overflowing element is on the top of the first container's blurred element instead on the behind of it

to see the result please reset the bootom css attribute of .bug class according to your browser

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  /* -webkit-backdrop-filter: blur(7px); */
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
  /* bottom: 24%; */
  height: 100px;
  width: 100px;
  bottom: 500px;
  border-radius: initial;
}

<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

I have no idea what's going on here and why ???

Please help me to understand this

*while it should be at the top of that blurred element* --> what make think it should be like that? — Temani Afif, Jun 30 '21 at 21:28
no, the first and second are two different situation. Adding position:absolute change all the story — Temani Afif, Jun 30 '21 at 21:31
I have added two duplicate explain the painting order. Take the time to read them and you will understand the logical behavior you are facing — Temani Afif, Jun 30 '21 at 21:33
Temani Why didn't you just explain it in answer by leaving the question as it is ?? okay any way I m gonna read that ... thanks for ur time — Rakesh, Jun 30 '21 at 21:38
because I already gave two very detailed answer. I don't see why I have to repeat myself again — Temani Afif, Jun 30 '21 at 21:42

Why backdrop filter: blur(5px) is breaking my design?

First weird thing

How it's gone

Another weird thing with backdrop filter is --

0 Answers0