Наткнулся на проблему. Надо применить фильтр blur ко всей странице. Т.е. чтобы весь контент на странице был заблюрен (уж такой эффект хочет применить дизайнер на странице).
В webkit есть css фильтр, в FF получилось применить SVG фильтр. А вот в IE10 и 11 беда! Что только не пробовал - не работает!
Единственное рабочее решение - рендерить html в canvas, делать размытие и отображать на странице поверх контента. Но работает несколько криво и очень медленно! В IE уходит около 4-5 секунд. Делать эту операцию заранее не получится, так как заранее неизвестно, что будет отображено на странице на тот момент, когда ее заблюрить необходимо.
Кто что посоветует? Неужели в 2014 году IE не умеет делать blur?
@killer112 рендерить html в canvas вы уже умеете, а размытие можно существенно ускорить если делать на gpu. Чтобы не разбираться с webgl с нуля можете взять этот двиг www.pixijs.com .Там уже есть поддержка blur.
Спасибо, попробую. Но проблема в том что рендер html в canvas работает не совсем так, как надо. И раже если размытие будет работать быстро, то на рендер все равно требуется время.
@Zav Задача следующая: есть страница сайта с контентом. Поверх контента отображается модальное окно. При отображении модального окна контент под ним должен размываться. Если делать скриншот, то размер картинки в предельном случае получается где-то 1920 по ширине и 5000-20000 пикселей по высоте.
Мучить сервер ради браузерного блюра - плохой вариант.
Может быть вместо таких тяжелых преобразований для пользователя стоит просто затемнять экран? :-) Оно и на мобильных устройствах по шустрее будет.
Можно сделать это только для IE, а для человеческих браузеров с блюром.
Простой
Простой