Home Why does backdrop-filter: blur break whenever unrelated elements are animated

Questions

Why does backdrop-filter: blur break whenever unrelated elements are animated

July 16, 2024

I’m building a website, and use the backdrop-filter: blur(12px) CSS effect on my navbar. Whenever I created a CSS animation to animate the text on my page, the blur filter disappeared. This affected all the elements on my page.

Here is an example of the problem.

<head>
  <style>
    body {
      background-color: rgb(8, 8, 8);
      color: white;
    }
    
    .header {
      position: fixed;
      left: 0;
      right: 0;
    }
    
    .navbar {
      display: flex;
      flex-flow: column;
      margin: auto;
      border-radius: 16px;
      width: 40%;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.2);
      min-height: 48;
      backdrop-filter: blur(12px);
      border: 1px solid hsla(0, 0%, 100%, 0.1);
    }
    
    .text {
      display: flex;
      margin: auto;
      padding: 0;
    }
    
    .fadeIn span {
      opacity: 0;
      filter: blur(12px);
      transform: translateX(-20px) translateY(30px);
      animation: fadeIn 1s ease-out forwards;
      display: inline-block;
    }
    
    .fadeIn span:nth-of-type(1) {
      animation-delay: 0.3s;
    }
    
    @keyframes fadeIn {
      to {
        filter: blur(0px);
        opacity: 1;
        transform: translateX(0) translateY(0);
      }
    }
  </style>

</head>

<body>
  <div style="display: flex; flex-direction: column">
    <div class="header">
      <div class="navbar">
        <a href="/">Home</a>
        <a href="/test">Test</a>
        <a href="/about">About</a>
      </div>
    </div>

    <div class="text fadeIn">
      <h1><span>Here is my content</span></h1>
    </div>
  </div>
</body>

If you remove the fadeIn class from the text, the issue goes away. I believe this has to do with the combination of filter and transform, but wanted to confirm my suspicions. I have done some research, and others have said that there is an issue in chrome that may cause this, but supposedly it’s been patched.

Any solutions would be greatly appreciated!

>Solution :

Try adding z-index: 1 to .header.

.header {
  position: fixed;
  left: 0;
  right: 0;
  /* added */
  z-index: 1;
}

It seems when an animation applied to .fadeIn, it changes the stacking order. Thus you need to explicitly assign the stacking order of the element with backdrop-filter with a higher z-index. Otherwise it will not affect the elements on top of it.

<head>
  <style>
    body {
      background-color: rgb(8, 8, 8);
      color: white;
    }
    
    .header {
      position: fixed;
      left: 0;
      right: 0;
      /* added */
      z-index: 1;
    }
    
    .navbar {
      display: flex;
      flex-flow: column;
      margin: auto;
      border-radius: 16px;
      width: 40%;
      padding: 1rem;
      background: rgba(0, 0, 0, 0.2);
      min-height: 48;
      backdrop-filter: blur(12px);
      border: 1px solid hsla(0, 0%, 100%, 0.1);
    }
    
    .text {
      display: flex;
      margin: auto;
      padding: 0;
    }
    
    .fadeIn span {
      opacity: 0;
      filter: blur(12px);
      transform: translateX(-20px) translateY(30px);
      animation: fadeIn 1s ease-out forwards;
      display: inline-block;
    }
    
    .fadeIn span:nth-of-type(1) {
      animation-delay: 0.3s;
    }
    
    @keyframes fadeIn {
      to {
        filter: blur(0px);
        opacity: 1;
        transform: translateX(0) translateY(0);
      }
    }
  </style>

</head>

<body>
  <div style="display: flex; flex-direction: column">
    <div class="header">
      <div class="navbar">
        <a href="/">Home</a>
        <a href="/test">Test</a>
        <a href="/about">About</a>
      </div>
    </div>

    <div class="text fadeIn">
      <h1><span>Here is my content</span></h1>
    </div>
  </div>
</body>