How to fix filter: blur() performance issue in Safari
The filter: blur() property in css may come in handy in some situations, but you should know of a side effect it has in Safari (tested on version 15.1 as of this writing).
The issue is a nasty performance drop around the element on which the filter is used, making every other interaction extremely slow. And it happens in Safari only. In other browsers everything works well.
One solution I've found so far is to use transform: translate3d(0, 0, 0) along with filter on the same element, to force the browser use GPU acceleration for that particular element instead of the CPU.
filter: blur(200px);
transform: translate3d(0, 0, 0);