Reputation: 634
I have a site that has a moving svg that follows the cursor.
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
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
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