Safari Issue with SVG Logo

[birdiegolden]

Hello. We’re looking for someone who is VERY proficient with the following technologies to fix the glitching animation issues we’re having with our LOGO in all browsers (very slight but noticeable in the PEN), but ESPECIALLY on SAFARI browsers where the issue is most prominent.

GENERAL NOTES | Current Functionality:

1. The log is in SVG (not PNG).

2. We’re using WAYPOINTS.JS to trigger the animation on Up & Down scrolling and jQuery / CSS/3 animations to achieve the fade in/fade out animation.

3. The logo does not work well at all in Safari currently, and while it appears to work in Chrome and Firefox, it still has a slight glitch that I am sure is what is causing the Safari issues (see code pen example below).

4. I’ve temporarily commented out the slide left and right animation on scroll on the PEN so you can see the glitching easier. You can trigger the glitching by scrolling up and down many times.

PEN EXAMPLE: https://codepen.io/brittany-golden/pen/oNvpjPz

---

THE ISSUE: (SAFARI)

1. The glitch in the JS animation on the second or third scroll up and down doesn’t function properly like it does in Chrome or FF.

2. Logo SVG elements load inconsistently on Safari specifically (i.e. Letters don’t fade back in, the logo doesn’t fade back out and slide, etc.) This is likely because of the overall issue, and can be duplicated on the website where the logo is in production using a native Safari browser on MAC: This is an example of the logo in production, LIVE: https://thestable.com

Any help on this is appreciated! This appears to be an issue nobody can figure out

[Paul_Wilkins]

@birdiegolden

This appears to be an issue nobody can figure out

I recommend using an animated gif instead, for your logo.

If you had developers recommending the unpopular idea of gif instead of svg, they get my thumbs up.

[birdiegolden]

Hi Paul, I haven’t heard the suggestion yet, though I have heard we should break out the elements in .PNG vs .SVG and animate those - Do these GIFs look pristine on Retina and have the same performance load time as an SVG via CSS3/Animations?

[Mittineague]

Only a thought. Do you think the SVG as an external file instead of in the HTML might ease the repaint pain any? I suspect not and the problem has to do with browser limitations, but maybe a little.

[Paul_Wilkins]

@birdiegolden

Hi Paul, I haven’t heard the suggestion yet, though I have heard we should break out the elements in .PNG vs .SVG and animate those - Do these GIFs look pristine on Retina and have the same performance load time as an SVG via CSS3/Animations?

That’s something that could be investigated in parallel with svg. That way you’ll have a reliable fallback for if the browser issues with fancy svg cannot be resolved.