SVG Filters <feGaussianBlur> Glitch Issues When Triggering On Up & Down Page Scroll

[birdiegolden]

Hey All -
I have a logo that I made using CSS3 animations and some SVG transitions. For the most part it works pretty well, but there are two distinct issues I can’t seem to solve. If you have any idea how to smooth this out, I would really appreciate the insight.

Issue 1 While Safari supports SVG transitions and CSS3 animations, the logo doesn’t reappear after scrolling back up, and is buggy afterward in the way it blurs in and out / slides.

Issue 2 If you scroll up and down a few times you’ll notice the logo glitches in the sense that it almost disappears for a half second before restarting. I looked over the CSS but I can’t seem to find what might be causing this.

Thanks again. Appreciate the additional help.

PEN https://codepen.io/brittany-golden/pen/OGxbxq

[Erik_J]

Hi,

Issue 2, Doesn’t seems to happen in other major browsers, at least not the Linux versions which excludes Safari.

The animation glitch could be happening in my browsers too but only when I comment out the JQuery script.

Though the disappearing doesn’t happen. Sorry I can’t be of further help

[birdiegolden]

Thank you for looking. I have determined this issues seems to be specific to native Safari. I’m not sure why Safari doesn’t respond to this in the same way as other major browsers do. Any insight on if this is perhaps a Safari bug? Or just a code error on my end that Safari is picking up?

[PaulOB]

Safari often has trouble with repainting after animations especially where fixed elements are involved.

You could try forcing a repaint with some js or one of the CSS animation hacks.

I did see an old bug that someone else had with svg so may be worth a try looking at their solution.