Chrome 116中backdrop-filter与mask-image结合异常问题求助

我在Chrome v116版本中，尝试结合使用mask-image和backdrop-filter属性实现文本上方的渐变模糊效果时出现异常：该效果在Firefox v116中显示正常，但在Chrome里仅渲染出白色实心块。

预期效果（Firefox v116）：

实际效果（Chrome v116）：

以下是我使用的代码：

HTML代码 #

<div class="gradient-blur" *ngIf="checkOverflowBlurGradient(container)">
</div>

CSS代码 #

.gradient-blur {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #F8F9FA);
  opacity: 1;
}

查询caniuse.com得知Chrome v116本应支持这两个属性，现在想确认这个问题是浏览器本身的Bug导致，还是我的实现方式存在错误。

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