Blur effect does not work on Safari

Hi everyone!

There is a problem that the blur effect does not work on Safari. How can I get it to work properly on Safari too?

I have .engin_blur, .engin_blur-hero blocks with the following settings:

image

Project link: https://engin-by-vectorly.webflow.io

Hi @FlowKeeper blur should work on Safari when I have disabled mix-blend-mode blur is applied.

you can also check your errors in browser as you have issue with particles.
BTW: I hope this site is meant to be focused on users with hi specs computers as this kind of blur usage eats CPU like crazy.

1 Like

@Stan Thanks a lot!

Disabling mix-blend-mode helped. Maybe there is some similar solution for blur, so as not to overload the computer performance?

hi @FlowKeeper you should be familiar how blur works. It recalculate each pixel as many times as is set so even with small blur number it is a lot of calculation and on top you add animation so CPU goes crazy and it will have big impact on page overall performance.

Blur is nice but should be used with caution this mean take in consideration number of elements their size and blur amount(px) 10px blur → 1-2 elements 2px blur → 5-8 elements etc but again size of element and its type (image or color only) play huge part .

1 Like

@Stan Thank you! This is useful information for me.