Safari Bug: Animated Blurred SVGs

[helden]

i am rotating 3 shapes in an SVG with GSAP. When i apply filter:blur to the parent div there a some strange rendering issues on Safari: 

 

 

See the Pen vYbRVLd by paul-siteway (@paul-siteway) on CodePen

[Toso]

its hard to guess since you didnt add the code in the demo but i dont think this issue is related to the GSAP, i had a problem like this last week you clearly can see the lines in that blue light and it turned out to be a problem with browser render

 

try to comment all the gsap codes and just rotate it with css and check if the problem still there

[helden]

I am sure this is a Safari bug not a GSAP bug. Hence, the title.
GSAP has historically found ways to circumvent browser inconsistencies and bugs, so my hope was this is maybe a known problem, that can be addressed by doing it "another" way. 

[Toso]

my issue was happening also inside Chrome, but since it's a simple shape we created the blur with the shadows, not filter:blur 

 

it would be better if you could add the code you tried with the demo, its easier to test it and find the problem

[helden]

Ok. Updated the Codepen Demo.

[alig01]

Hey, 

 

I had the same issue a while back.
Try to add this css to your pen:
.glow-animation {
  will-change: filter;
}
source
But there are also other tricks which should help to access the GPU acceleration for the particular element.

Like: transform: translate3d(0, 0, 0);
Just google for it and test which works the best for your case. 

 

After the css changes everything looked normal on Safari (on my device).

Hope this helps and good luck with your project.

[Toso]

yes as  @alig01 said this could fix the problem it was the first thing to search about in tailwind to use will-change-[value]

 https://tailwindcss.com/docs/will-change#optimizing-with-will-change

 

but when I updated the tailwind you used from 2.2 to the latest version 3.3 everything worked normally without using the will-change

 

 

also what if you just added the blur in the SVG while exporting it? 🤔 🤔 🤔

[Toso]

almost forgot, tailwind has these kinds of simple animations built in already so you can use them on the go like animate-spin 

 

https://tailwindcss.com/docs/animation 

[helden]

Adding will-change: filter; to the parent DIV that has the blur-filter applied did not work.

 

Adding will-change: filter; to the SVG that is being transformed (rotated/scaled) does fix the issue. 🤯

[helden]

BTW: Adding will-change: transform to the SVG does also fix the error and might make more sense as the SVG itself is only rotated and scaled. 
My reading is Safari applies some kind of optimization as soon as a will-change is present. 

[Toso]

thank you @helden for sharing your solution, yes, we need to keep up with all the browsers updates and different behaviors for desktop and mobile, 

they just update to fix 1 thing and break 10 things 😂