Question 44859 in Html Question posted in
Some basic documentation can be found here.

backdrop-filter doesn`t work on my dropdown menu – Html

Backdrop-filter: blur(20px); doesnt work ;(

I have a dropdown menu that when pressed the button menu changes from display none to display block and I want to make #account-info-main background would have backdrop-filter: blur(20px); but for me it doesn`t appear. https://ibb.co/FnNWYMB

HTML:

<div class="account">
 <button class="profile-dropdown" id="profilie-dropdown-id" onclick="show_list_profile()">
  <i class="fas fa-user-circle"></i>
 </button>                        
 <div id="account-info-main">
   <div class="account-info">
    Other code
   </div>
 </div>
</div>

CSS:

  .account {
    align-items: center;
    text-align: center;
    
  }

  .profile-dropdown:hover {
    transition: 0.5s;
    background-color: rgb(0, 0, 0);
  }

  .profile-dropdown {
    color: rgb(233, 233, 233);
    font-size: 20px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    border: 3px solid #ff8906;
    background-color: #0000007c;
    cursor: pointer;
  }

  .account-info {
    color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
  }


  #account-info-main {
    position: absolute;
    transform: translateX(-70%);
    margin-top: 1%;
    border-radius: 10px;
    height: 350px;
    width: 400px;
    display: none;
    border: 3px solid rgb(190, 190, 190);
    background-color: rgba(212, 212, 212, 0.507);
    backdrop-filter:  blur(20px);

  }

JS:

      function show_list_profile() {
        var dropdown = document.getElementById("account-info-main");
    
        if (dropdown.style.display == "block") {
            dropdown.style.display = "none";
        } else {
            dropdown.style.display = "block";
        }
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem was of nested other elements who had backdrop-filter: blur, solution found in backdrop-filter not working for nested elements in Chrome


  2. 0

    You have to place the backdrop-filter: blur(20px) on some background element, between your content and your dropdown menu. Example:

    function show_list_profile() {
  let dropdown = document.getElementById("account-info-main");
  let background = document.getElementById("background");

  if (dropdown.style.display == "block") {
    dropdown.style.display = "none";
    background.style.display = "none";
  } else {
    dropdown.style.display = "block";
    background.style.display = "block";
  }
}
    .account {
  align-items: center;
  text-align: center;
}

.profile-dropdown:hover {
  transition: 0.5s;
  background-color: rgb(0, 0, 0);
}

.profile-dropdown {
  color: rgb(233, 233, 233);
  font-size: 20px;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  border: 3px solid #ff8906;
  background-color: #0000007c;
  cursor: pointer;
}

.account-info {
  color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
}

#account-info-main {
  position: absolute;
  transform: translateX(-70%);
  margin-top: 1%;
  border-radius: 10px;
  height: 350px;
  width: 400px;
  display: none;
  border: 3px solid rgb(190, 190, 190);
  background-color: rgba(212, 212, 212, 0.507);
  z-index: 2;
}

#parent {
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
}

#background {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(20px);
  pointer-events: none;
}
    <div id="parent">
  <div class="account">
    <button class="profile-dropdown" id="profilie-dropdown-id" onclick="show_list_profile()">
      <i class="fas fa-user-circle"></i>
    </button>
    <div id="account-info-main">
      <div class="account-info">
        Other code
      </div>
    </div>
  </div>
  <div id="background" style="display: none"></div>
</div>

    Breakdown:

    • I wrapped the HTML into a #parent div to allow the background to spread the whole page. This is not strictly necessary, you may want to remove it so the backdrop cover the whole page OR only this parent div, depending on your needs.
    • I added a #background div hidden by default, which create the backdrop effect behind the dropdown. It has a the backdrop CSS, and also pointer-events: none; to allow clicks to pass through it. Its visibility gets toggled the same way as the dropdown is. It has a z-index: 1;.
    • I gave z-index: 2; to the dropdown (#account-info-main) to allow it to be above the background and the blur effect.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search