I'm currently in the process of designing a website, and have implemented the backdrop-filter: blur(12px) CSS effect on my navbar. Unfortunately, I encountered an issue when trying to animate text elements using CSS animations, as the blur filter would disappear. This problem affected all elements on the page.
Here is a snippet showcasing 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 disappears. My assumption is that this issue arises from the combination of filter and transform properties, but I wanted to verify if this is indeed the case. Upon researching, some sources suggest that there was a previous bug in Chrome causing such problems, which has reportedly been fixed.
I would greatly appreciate any solutions or insights into resolving this issue!