I fixed it by changing the backdrop blur from the individual cards to the containers themselves. I believe it’s because your styling was nested too deep within children’s elements. By setting the blur to the direct descendants of the 'feature2-pricing-content, it seems to be applying to the entire container now.
actually this works in the pricing section, but not the “feature3” section. I just want the blur behind the individual cards and not the entire container, how would I go about doing that?
I’ve been doing some digging trying to figure this out, but haven’t found any solution as of yet. I tried using a pseudoelement to append a blur to the child element, but the same result is occurring. In the designer, it looks as if the effect is being applied, but on preview, the styling doesn’t apply.
Interestingly though, if I set the pseudo element z-index on top of the child container, it seem that the blur gets applied to the text elements within the child, even though it still fails to blur you can see a glow that I would interpret as blur.
The following leads me to believe it’s probably a bug or it’s not being supported for whatever reason… Backdrop-filter: blur is in Beta so that might be the reason why it’s not behaving as expected.
Hi! I’ve been struggling with a similar bug and I was able to replicate it. Apparently, this happens when you add any sort of Animation to the parent div of the div with a backdrop filter. Try removing the parent div(s) animations and it should work fine
Hi I had same issue and it helped removing animation; but I need that appearing animation for div parent… so did you find any other solution by any chance?
thanks, it was happen to me for my instance navbar. usually i never convert navbar to component, and bg-blur is always work. but it not work for the instance. so i applied bg-blur on the container instead of the section
