Простой способ оптимизировать CSS свойство filter: blur(300px);
Свойство filter: blur() в css отличный способ создать эффект матового стекла или просто эффект размытия объекта!
Однако я столкнулся с проблемой оптимизации (адаптации) данного свойства при работе с браузерами IOS/Safari
Проблема заключается в резком падении производительности при применении данного свойства в safari, что делает любое другое взаимодействие чрезвычайно неудобным и медленным.
Единственное простое решение, которое мне удалось найти, это применение свойства transform: translate3d(0, 0, 0); вместе с фильтром filter: blure(); чтобы заставить браузер использовать ускорение графического процессора для этого конкретного элемента вместо центрального процессора.
На данный момент это одно из 2-3 простых решений, не считая кастомных скриптов на JS.
Или использования хаков CSS (что не есть хорошо, ИМХО)
Пример кроссбраузерного использования свойства filter: blur();
-webkit-filter: blur(15px);
filter: blur(15px);
transform: translate3d(0, 0, 0);