Safari SVG filter shadow issue

[Ian Robinson]

Sorry, tried to edit/delete this and update my question so ignore this and go ahead to my following post.

[Ian Robinson]

I built a WP theme that involves SVG shadows and it works fine in every browser (even verified with Opera and Arc), but for some reason ONLY Safari (running version 17.1) gives me issues. E.g. knocking out and leaving a relic of a shadow behind when something moves, blinking in and out on transforms, hitting a speed bump scrolling down until an animation completes. Anyone else run into this issue?

*attaching vid of  examples of the issue before trying to supply isolated code in hopes that someone else has already run into this issue before and knows the solve

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Ian Robinson]

Thanks for the reply! I was trying to root out if anyone has already come across this issue before I started sharing code/posting as understandably CodePen snippets don't reproduce the error as I'm fairly confident it's isolated to a Safari conflict along with this being integrated into a Wordpress theme (and it'd be impossible to share without integrating their CMS into CodePen).  But the dev page I showed is found at:  http://dev.radiologyhealthequity.com/our-team

I'd be happy to pull out any particular code if something is unclear though.

[Ian Robinson]

Sorry. I just reread your post and saw the comment about Stackblitz and I'm not really a back-end person, but can work to figure it out if seeing the live dev isn't enough.

[Ian Robinson]

Alright. I went back in and pulled out code to make rough pens of two of the pages as it seems that on occasion the internal page issues will clear up, but the front page tends to be the one that always breaks in Safari. I had tried a pen before I came on here but the issue isn't duplicated running through CodePen in Safari as you will see when looking at them. To see the actual issue you need to see it live (https://playground.ilrobinson.com/030624.1/index.html) - and there are no additional plugins or scripts being run that aren't in the pens.

landing page: 

See the Pen xxeEGeW by ilrobinson (@ilrobinson) on CodePen

internal: 

See the Pen LYvRVmd by ilrobinson (@ilrobinson) on CodePen

 

[mvaneijgen]

Both the codepen and the site work perfectly fine at my end in Safari version 17.2.1.

 

Any particular reason for the complicated setup with SVG and filters. I've found complex SVGs never play nice with animations, but I don't see why you can't use a normal div here with border-radius and a box-shadow, probably gets you a beter result with 1/3 of the resources need at multiple fronts (accessibility, page speed, render time) 🤷 

[Ian Robinson]

Thanks for your reply, mvanelgen! Yes, as I mentioned, it works fine in CodePen, but if you click on the example running outside (https://playground.ilrobinson.com/030624.1/index.html) you see the issues (and mind you I disabled all additional scripts running in it) - why I initially wanted people to look at the example with the issue.

I like to experiment with different methods every time I work on a new project and hadn't used SVG shadows before so wanted to give them a try. Part of the experience is learning what to do when something breaks so was hoping to figure out if it's possible to correct or if it's just a conflict issue (in this case with GSAP). To your point I imagine the rendering with Safari seems the most logical in that the portions requiring running multiple transitions alongside the shadows is the conflict. Possibly a future version of Safari will handle it better.