3D Animation glitching severely on safari

Hi!

I am having an issue where an animation I spent lots of time on is working everywhere except for safari. I would appreciate any help in finding the root cause of this issue or a fix in the form of custom code etc.

  1. The boxshadows are causing glitching/flashing with the pulsing waves. I can live with removing the boxshadows on the inside of the sphere rings.

  2. The MAJOR issue is that the red light effect is not respecting overflow hidden and is reseting the border radius to 0% on the animation loop.

Thank you in advance!

Live Link: https://sphere-bug.webflow.io
Read Only: Webflow - Sphere Bug

Still looking for a solution if anyone has an idea : )

Hi @Benjamin_Churchill first at all the animations are working as expected on latest Safari (17.2.1). The issue appears only on older versions in my case I have tested on Safari 15.6.1. There are glitches and red is over circle.

I didn’t investigate glitches but red color issue is most probably caused by using for shadow the property box-shadow instead filter: drop-shadow(...) If you are not familiar about differences here is one article but feel free to find one you will understand easily.

Another issue is that you have 2 errors related to canvas undefined and these should be fixed first. Use DevTools to investigate more.

Hope this will point you right direction.

BTW this animation is very heavy and will require powerful computer as on old testing Mac fans went crazy (on new Mac is all fine). Just small note.

1 Like

Thank you! So, would I use a custom css box shadow with the filter: drop-shadow property?

hi @Benjamin_Churchill TBH is have no idea what will be best solution as I have never created something like this. But what I see how red layer works you may try to use just background as it offers radial gradient as you already use instead using shadow. I do not know why you have different approach for red layer.

You can try to build some simpler prototype in “Codepen” or any other online platform if you are not only “no-code” enthusiast to see what will work best for you.