Search code examples
htmlcssfilterfrontendweb-frontend

CSS Backdrop filter is not working properly for dropdown menu in chrome

I am making a website where I have given backdrop filter property to navbar as well as a dropdown menu. But this blur effect is only working for navbar and not for dropdown menu. But strange thing is that both are working on firefox but on chrome only backdrop filter is working for navbar not for dropdown menu. CSS for navbar is given

.navbar{
  height: 100px;
  background: linear-gradient(
    90.39deg,
    rgba(255, 255, 255, 0.61) 1.19%,
    rgba(255, 255, 255, 0) 100.87%
  );
  backdrop-filter: blur(20px);
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  /* padding: 34px 100px; */
  padding-right: 100px;
  padding-left: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 20;
  transition: height 0.4s linear;
}

and CSS for dropdown menu is:

.navbar #mobileDropdownMenu {
  background: linear-gradient(
    90.39deg,
    rgba(255, 255, 255, 0.61) 1.19%,
    rgba(255, 255, 255, 0) 100.87%
  );
  backdrop-filter: blur(20px);
  border-radius: 10px;
  margin-top: 2rem;
  width: 200px;
  position:absolute;
  top:10px;
  right:-12px
}

navbar menu

I could not find any solution

Solution

  • It's well-documented that backdrop-filter doesn't play nicely with nested elements in Chrome.

    You can work around this by removing the blur effect out of your .navbar and .navbar #mobileDropdownMenu rules, and moving it into CSS pseudo-elements for each of them:

    .navbar::before, .navbar #mobileDropdownMenu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    z-index: -1;
}