Remove backdrop-filter then entire component's background disappear

Question

I am a intern working on a company's project, what I wanted to do is to remove the blur effect on the modal.

Original scss:

@mixin card {
    background: $color-surface($background, 0.5);;
    backdrop-filter: blur(28px) !important;
    border-radius: $card-border-radius;
}

Original display

Changed scss:

@mixin card {
    background: rgba($color-surface, 0.5);
    border-radius: $card-border-radius;
}

Changed Display:

Which both the text and the background is disappeared, my guess is the "white" background is covering the text and the $color-surface light blue background, but I wonder why is that ?

How can I remove the blur effect properly ?

Thanks for any comments or answers.