Words too blurry and Background Video not automatically playing (Safari Only)

Hi,

I’m in the process of building my portfolio. I’ve primarily been using Google Chrome, but I just today realized that some things look messed-up on Safari.

The page I’m referencing below is the ‘WORK’ page.

I have a blur transition on the “GRANT STONE TOLSON” “WORK” “MUSIC” “ABOUT” navigation links that start automatically when the page loads. On safari, “GRANT STONE TOLSON” is normal, but the other three are too blurry.

The same goes for all of the work piece choices on the “WORK” page. They look fine in Chrome, but they’re way too blurry in Safari.

Another issue is when the disco ball drops on the very first homepage, it’s not spinning (only on Safari). If you’re on Chrome, it works just fine.

I’m brand new to Webflow, so I really have no clue what’s going on.

Thanks for your help!

Grant


Here is my site Read-Only: https://preview.webflow.com/preview/ballsack?utm_medium=preview_link&utm_source=dashboard&utm_content=ballsack&preview=ec549be71423ad37ef3625847a4566ad&mode=preview

@Stan I see other people tagging you, so I hope you don’t mind me doing the same. Would you or anyone else know the answer to my question above?

I know you’re busy, so I appreciate any guidance you’d have!

Thanks,

Grant

Hi @Grant_Tolson I do not know that people tagging me and firs I would like to thank you to ask directly me to solve your problem but I new that here are more experienced devs than me.

To your question: Your problem is with animation firstly you have choosen wrong selectors and secondly you didn’t set your blur animation back to 0

  1. You have on some animation steps assign to combo classes. To fix it set all animation steps to ONE class text-block-3. If you click on class(on field in screenshot) scroll through and choose this class for each step and make sure that animation is assigned to class and NOT element

  1. add filter to set blur back to 0 or whatever value you need.

Done