使用CSS backdrop-filter为何降低HTML文本清晰度？求合理解决方案

在卡片元素上应用backdrop-filter: blur效果时，内部文本无法保持原本清晰度——哪怕设置blur(0px)，文本也会变得模糊。我不想用绝对定位和创建额外元素的方案，因为该元素带有translate动画，额外元素会让代码臃肿。

现象对比 #

• 无backdrop-filter时的文本状态：
  
• 添加backdrop-filter（即使是blur(0px)）时的文本状态：
  
• 文本细节对比（白线上方为添加backdrop-filter: blur(0px)的文本，下方为未添加的文本）：
  
• JSX结构：
  

我尝试过搭配其他CSS属性，原本想用0透明度文本加position: absolute的同级文本填充空间，但考虑到需要持续跟踪带动画的div，最终放弃了这个方案。原本预期文本不会受该属性影响。

复现步骤 #

• 使用npm create vite@latest创建全新React项目，选择typescript + swc模板
• 进入src文件夹下的App.tsx文件，以最后一个<p>标签为例，添加card-glass CSS类（可移除默认的read-the-docs类），填入任意文本
• 进入App.css文件，添加card-glass类：

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

开启/关闭注释的backdrop-filter属性，即可观察到文本在该属性启用时（哪怕值为0px）出现抗锯齿过度、模糊的现象。

内容的提问来源于stack exchange，提问作者Jack