Как сверстать размытый блок поверх яндекс карты?

Question

[Snitch]

1. Именно яндекс карты.
2. Фон размытого блока двигается вместе с картой.

Из того, что я попробовал:
- html2canvas: не скринит тайлы карты
- -moz-element(): работает, но только если прописать в инспекторе и только в мозиле

upd1: Я не спрашиваю что мне искать в гугле. И знаю как этот фон делается, как работают фильтры и канвас. Я спрашиваю как это сделать в описанном мной случае.
upd2: Собственно вот чего я хочу (работает только в мозилле) https://jsfiddle.net/2e4v5pLL/2/

Comments

[Александр Зачиналов]

Блок двигается вместе с картой - можно об этом подробнее, какую именно роль выполняет фон? Это фон баллуна у объектов на карте или просто какой-то фиксированный полигон на ней, или она закреплена поверх карты как на скрине постоянно?

[Snitch]

Это div, стоящий после карты и position: absolute; top: 0. То есть он над картой и всегда вверху. Сам по себе должен выглядеть как "матовое стекло над картой".

[Snitch]

Фон у div'а не статичный. Подвинули карту, подвинулся фон.

[Александр Зачиналов]

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

[Snitch]

Александр Зачиналов: Да именно это я и имел ввиду. Но исходя из способов решения - приходится именно двигать фон блока. Так как вы описали, сегодня можно сделать только в Safari.
Артём Петренков: Именно так. Но это не конечный вариант. Да и мне интересно стало.

Answer 1

[Максим Тимофеев]

Ищи js скрипты "размытый прозрачный фон", "эффект молочного стекла" и т.д. В Гугле много вариантов. Но в комплекте с яндекс картами будет весьма медленно работать, скорее всего.