Как сделать равномерный backdrop-filter: blur?

Question

[r_g_b_a]

Здравствуйте.
Ниже прикрепил фото, на котором результат применения backdrop-filter: blur(30px)
Интересует несколько вопросов:
- почему в фигме такого не наблюдается и все равномерно? Они решили забить на то как этот эффект рендерят браузеры и делают по-своему?
- какие есть варианты исправления проблемы, помимо "растягивания" краев блока и отсечения лишнего
- как сделать, чтобы не так лагало, особенно при анимации

Comments

[Вадим]

Демку Вы конечно же не дадите...

Ну чтож...
1) откуда нам знать как сделано в вашей фигме. И да, фигма не браузер. Они стараются делать похоже как в браузерах.
2) Разные
3) Попробовать вынести вычисления этих блоков на отдельный композитный слой. Подсказать браузеру что будет меняться определённое свойство через will-change. Или анимировать через requestAnimationFrame. Но лучше такое не анимировать. Это ресурсоёмкое свойство.

[r_g_b_a]

Вадим,

[Вадим]

r_g_b_a, Ну такого же эффекта как на скриншоте в вопросе не наблюдаю. Блюр поверх всего блока, картинку не видно.

[cssfish]

насчет ресурсоемкое очень верно подмечено - оно бывало и браузер завешивало нехило (