Маска-Image заставляет фону-фильтр сбой ⇐ CSS

[Anonymous]

Я пытаюсь применить как маска на родительском контейнере, так и на фоне фильтра: размытие (44px) на дочерний элемент. Но кажется, что когда у родителя есть маска-изображение, эффект фонового фильтра на ребенка становится совершенно неэффективным в некоторых браузерах (особенно хром).
Вот упрощенная версия моего макета: < /p>




温馨提示：完成两次对话即可领取红包！


< /code>
.content-area-mask {
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.message.tip {
backdrop-filter: blur(44px);
background: hsla(130, 35%, 45%, 0.25);
}

< /code>
Problem:
When the parent (.content-area-mask) has a mask-image, the backdrop-filter in .message.tip stops working — the blur simply doesn't apply.
What I need:
Is there a workaround or solution that allows both mask-image and backdrop-filter to take effect together?
If this is a known limitation in browsers (e.g., Chrome/WebKit), is there a clean fallback or way to simulate the blurred background visually, even if the blur cannot be rendered natively?
Any help, hacks, or best practices would be appreciated.
Demo:
Live example on CodePen: https://codepen.io/Alie-z/pen/xbGXrbL

Подробнее здесь: https://stackoverflow.com/questions/796 ... er-to-fail