Filter: blur() + tansition. Реально ли, чтоб не тормозило?

Question

[Сергей Шилов]

Добрый день! Всем известно, что блюр фильтр + transition очень не любит процессор, так как за короткий промежуток времени делаются огромные просчеты. Есть ли какие-то лайфхаки как можно имитировать этот блюр или как-то снизить нагрузку?

Answer 1

[Stalker_RED]

А если двигать SVG с заблюренной картинкой, не тормозит?
https://jsfiddle.net/Stalk/bxth941r/

Comments

[Максим Власов]

Chrome 67.0.3396.87
Windows 10
Core i5 -7200U
8Gb
Intel® HD Graphics 620

Наблюдаются подтормаживания

[Stalker_RED]

Максим Власов, странно, проверяю на core2duo e7300 с gtx260 - визуально не замечаю тормозов.

Можно, наверное, на webgl переписать, но мне лень :)
Если рискнете попробовать, отпишите что получится.

Пример: evanw.github.io/webgl-filter

Answer 2

[William]

для хрома, говорят, добавить в начало (до backdrop-filter) свойства css:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
transform: translate3d(0,0,0);
transform: translateZ(0);