Как сделать backdrop-filter кроссбраузерно?

Question

[Максим]

Есть такой filter который позволяет размыть хоть пол блока без дублирования контента
Но он работает только в -webkit- хоть лопни или приходится дублировать вот таким способом: codepen.io
Разумеется что стандартный blur не канает здесь ...

Можно ли достичь этого эффекта без такого нагромождения и дублирования ?

Тег поставил один css но возможно что есть решения на js/jquery

Comments

[Henxed]

Это доступно на многих браузерах, но увы, разработчики откл. данную функцию, так как она приводила к ряду проблем. Включить можно в хром браузерах chrome://flags/#enable-experimental-web-platform-features
В вашей ситуации скорее нужно посмотреть в сторону фильтра svg, но это не точно

[Максим]

Henxed, а можно ли это показать в пол блока ...т.е размыть пол изображения ?

[RAX7]

Максим Ленский, попробуй картинку в SVG завернуть и там ее частично размыть
https://yoksel.github.io/svg-filters-02-2018/#69 - см. 69 слайд
https://jsfiddle.net/4yxrkgLo/

[Максим]

RAX7, этот 69 фильтр тормозит ужас ...:)) у меня аж куллер закрутился с шумом ...лан походу это надо как то по другому сделать

[Максим]

RAX7, https://ru.stackoverflow.com/q/953371/330688 вот сам вопрос он не мой разумеется но я попытался реализовать эту плюшку но тшетно

[RAX7]

Максим Ленский, размытие не самая дешевая операция, были времена и фотошоп тормозил при размытии фоток. По другому наверное можно попробовать использовать WebGl https://html5.by/blog/webgl-image-filters/ или подождать когда в браузерах появится нормальная поддержка backdrop-filter =)

Answer 1

[Henxed]

Попробуйте данный скрипт https://github.com/AhsanE/backdropjs. Он как раз делает то, что вы хотите, размывает фон. Надеюсь данный вариант вас устроит. Не идеал... Можно посмотреть ещё в эту сторону