Does applying `backdrop-filter` property reduces text sharpness in HTML?

Question

This is driving me crazy, I seem to not be able to apply a backdrop-filter: blur effect on my card element without keeping the text inside it just as sharp as it normally should be. This issue was previously discussed here: Text seems a bit blurry on a backdrop blur (html/css)

but I wonder if there is a "proper way" to fix/get around this without recurring to absolute positioning and creating additional elements, since I also have some translate animations on the element and it's just bloated like that...

comments are some attempts I read online for relative issues... the children element is only text...

here is the two text screenshotted and edited next to each other (over the white line is the text with backdrop-filter: blur(0px) and under it is the text without it:

I tried some other css properties to add with backdrop-filter and was gonna try to fill the space with 0 opacity text and position: absolute another sibling text into it but refused to do it when it came down to tracking the animated div repeatedly.

I was expecting the text to not be influenced by the property.

How to reproduce

1. Create a brand new react project with npm create vite@latest -> typescript + swc
2. Go into the App.tsx file in the src folder
3. Let's take the last <p> tag as a sample, add a card-glass css class (and remove the default read-the-docs class if you prefer) and put whatever text you want in it
4. Go into the App.css file and add the card-glass css class:

.card-glass {
  background-color: linear-gradient(180deg, #ffffff00, #ffffff88);
  /* backdrop-filter: blur(0px); */
  border-radius: 1em;
  padding: 2em;
}

now you can toggle the commented backdrop-filter property to see the text being "antialiased" and smoothed when the property is on, even with 0px as value