Ben Jackson
Ben Jackson

Reputation: 634

filter:blur() is causing glitching in Safari

I have a site that has a moving svg that follows the cursor.

spitfire-x-warp.netlify.app

It works fine in Chrome and Safari but in Safari (ios and desktop) it glitches out. There are some strange squares that appear around the edges of the object. I'm not sure if it's aliasing or what. Perhaps an optimisation bug or something?

If anyone has any idea how to fix this I'd really appreciate it.

Many thanks

Upvotes: 1

Views: 1801

Answers (2)

dylanhu
dylanhu

Reputation: 131

Use the will-change: filter CSS property on the blurred element. This tells Safari to use less optimizations when rendering - I would guess that Safari "cheats" in a way when rendering the blur filter.

Upvotes: 7

Ben Jackson
Ben Jackson

Reputation: 634

Update on my progress:

I narrowed the glitching down to being a result on the filter:blur() I was using on the svg. This seemed to be causing a really high drain on the CPU which I've since read is quite common for blurring elements.

Although the effect is still a little janky, I was able to dramatically improve the page's performance (especially in Firefox and Safari) by switching to using an SVG filter rather than a CSS filter.

Upvotes: 1

Related Questions