Backdrop-filter в сочетании с Mask-Image не работает должным образом в Chrome ⇐ CSS

[Гость]

У меня возникла определенная проблема с сочетанием двух атрибутов mask-image и backdrop-filter в Chrome v116.

Я пытаюсь создать эффект градиентного размытия над текстом. В Firefox это работает нормально, но в Chrome отображается только белый сплошной блок.

Вот как это должно выглядеть (Firefox v116):





Вот как это выглядит (Chrome v116):





Вот код, который я использую:

.gradient-blur { фоновый фильтр: размытие (20 пикселей); -webkit-backdrop-filter: размытие (20 пикселей); маска-изображение: линейный градиент (вниз, прозрачный, #F8F9FA); -webkit-mask-image: линейный градиент (вниз, прозрачный, #F8F9FA); непрозрачность: 1; } Я проверил на caniuse.com: согласно документации, Chrome v116 действительно поддерживается.

Теперь мне интересно, вызвана ли эта проблема каким-то образом моим браузером или реализацией.