Fixing backdrop-filter: blur Issue with Interactive Parent Elements

hey all, does any one know how to get around the fact that backdrop-filter:blur doesn’t work when one of the parent elements has an interaction applied to it? Trying to add a backdrop blur to the individual cards of testimonial section 33

30 comments

Ganesh U.
·
·
Then you could apply embed css
Ganesh U.
·
·
Either for the backdrop/interaction
Lukas S.
·
·
tried that
Lukas S.
·
·
doesnt seem to work :S
Ganesh U.
·
·
It should. Can you please share preview link
Lukas S.
·
·
https://preview.webflow.com/preview/isa-galvao-demo-e6f4b2?utm_medium=preview_link&utm[…]2&preview=c3dc12c35d9f15825a12c6417af8604b&workflow=preview
Lukas S.
·
·
testimonial section
Ganesh U.
·
·
How about applying box shadows?
Ganesh U.
·
·
Backdrop filters only affect semi-transparent elements. If the background is solid, the effect won’t be visible.
Lukas S.
·
·
thats the wrong section
Ganesh U.
·
·
The same for this
Lukas S.
·
·
don’t understand how that answers my question. thats not related
Ganesh U.
·
·
To which element you wanna add the blur? The parent / any specific child element
Lukas S.
·
·
the ones that are blurred haha
Ganesh U.
·
·
Gotcha 😅
Lukas S.
·
·
honestly i think this is a webflow bug possibly
Ganesh U.
·
·
Webflow's Move interaction applies transform: translate(), which creates a new stacking context.
backdrop-filter only works on elements behind the blurred element, but transforms isolate it from the background.
This means that when the element moves, it breaks the blur effect
Lukas S.
·
·
Any idea if there is a way around this?
Ganesh U.
·
·
Working on it

Ganesh U.

Finally! This works perfectly

.testimonial33_list {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

Ganesh U.
·
·
Tried multiple options 🤧 But it was a simple fix
Ganesh U.
·
·
Got a chance to check bro Lukas S.?
Lukas S.
·
·
no that didnt work you’re making the wrong element blurred. I found a workaround now that worked

Lukas S.

<style>
  .testimonial33_content-wrapper {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(255, 255, 255, 0.5) !important; /* Add some transparency */
    z-index: 1 !important;
  }
  
  .testimonial33_list-left, .testimonial33_list-right {
    will-change: transform; /* This is already in your code */
    transform-style: flat !important; /* Override preserve-3d which can break backdrop-filter */
    backface-visibility: visible !important;
  }
  
  .testimonial33_list, .testimonial33_card-content-right {
    position: relative;
    z-index: 0;
    transform: translateZ(0);
  }
</style>

Ganesh U.
·
·
the above code worked for me it was a simple fix. what did you do
Ganesh U.
·
·
Having just this is fine bro. It did worked for me. Even though we're adding blur to parent element it did worked as expected
.testimonial33_list { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
Ganesh U.
·
·
Here I've just the above code and it worked perfectly
Ganesh U.
·
·
Please check and give it a try, it is working
Lukas S.
·
·
no dont you see that that is bluring the space behind the cards too?
Ganesh U.
·
·
It is but not highly noticeable. But glad you figured out the other way.

Issues

Fixing backdrop-filter: blur Issue with Interactive Parent Elements

Lukas S.

30 comments

Ganesh U.
·
·
Then you could apply embed css
Ganesh U.
·
·
Either for the backdrop/interaction
Lukas S.
·
·
tried that
Lukas S.
·
·
doesnt seem to work :S
Ganesh U.
·
·
It should. Can you please share preview link
Lukas S.
·
·
https://preview.webflow.com/preview/isa-galvao-demo-e6f4b2?utm_medium=preview_link&utm[…]2&preview=c3dc12c35d9f15825a12c6417af8604b&workflow=preview
Lukas S.
·
·
testimonial section
Ganesh U.
·
·
How about applying box shadows?
Ganesh U.
·
·
Backdrop filters only affect semi-transparent elements. If the background is solid, the effect won’t be visible.
Lukas S.
·
·
thats the wrong section
Ganesh U.
·
·
The same for this
Lukas S.
·
·
don’t understand how that answers my question. thats not related
Ganesh U.
·
·
To which element you wanna add the blur? The parent / any specific child element
Lukas S.
·
·
the ones that are blurred haha
Ganesh U.
·
·
Gotcha 😅
Lukas S.
·
·
honestly i think this is a webflow bug possibly
Ganesh U.
·
·
Webflow's Move interaction applies transform: translate(), which creates a new stacking context.
backdrop-filter only works on elements behind the blurred element, but transforms isolate it from the background.
This means that when the element moves, it breaks the blur effect
Lukas S.
·
·
Any idea if there is a way around this?
Ganesh U.
·
·
Working on it

Ganesh U.

Finally! This works perfectly

.testimonial33_list {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

Ganesh U.
·
·
Tried multiple options 🤧 But it was a simple fix
Ganesh U.
·
·
Got a chance to check bro Lukas S.?
Lukas S.
·
·
no that didnt work you’re making the wrong element blurred. I found a workaround now that worked

Lukas S.

<style>
  .testimonial33_content-wrapper {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(255, 255, 255, 0.5) !important; /* Add some transparency */
    z-index: 1 !important;
  }
  
  .testimonial33_list-left, .testimonial33_list-right {
    will-change: transform; /* This is already in your code */
    transform-style: flat !important; /* Override preserve-3d which can break backdrop-filter */
    backface-visibility: visible !important;
  }
  
  .testimonial33_list, .testimonial33_card-content-right {
    position: relative;
    z-index: 0;
    transform: translateZ(0);
  }
</style>

Ganesh U.
·
·
the above code worked for me it was a simple fix. what did you do
Ganesh U.
·
·
Having just this is fine bro. It did worked for me. Even though we're adding blur to parent element it did worked as expected
.testimonial33_list { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
Ganesh U.
·
·
Here I've just the above code and it worked perfectly
Ganesh U.
·
·
Please check and give it a try, it is working
Lukas S.
·
·
no dont you see that that is bluring the space behind the cards too?
Ganesh U.
·
·
It is but not highly noticeable. But glad you figured out the other way.