Website doesn't display on Safari

[Lucie_Tran]

Hello,

My website works fine on Chrome. But when I tested it on Safari, most of the website doesn’t show up, as if everything has been hidden.

---

Here is my site Read-Only: Webflow - Lucie's Portfolio

[Schuschi_Eyes (Martin S.)]

Hi @Lucie_Tran
Can you send the stage-link so we can look at the published site?

[Lucie_Tran]

Yes, here’s my stage link: https://lucietran.webflow.io/

[Schuschi_Eyes (Martin S.)]

Thanks.
I can’t reproduce your problem.
When I go on the website it looks no different to the version in chrome:

Which version of Safari and which OS X version do you use?

[Lucie_Tran]

Thank you for your reply!
I’m using Version 15.2 of Safari and macOS version 12.1.

This how it’s displayed on my safari browser:

[Schuschi_Eyes (Martin S.)]

Okay. I would recommend removing the page load animation of the first two elements to see if the problem is related to the fade-in animation.

[Lucie_Tran]

I see, thank you!

I tried removing page load animation and that allows them to show up.
I noticed that all of the interactions that I set up don’t work, so all divs with a “scroll to view” animation wouldn’t show up. Same goes for mouse hover animations.

[jimmyellen.889 (jimmy allome)]

Finally someone talked about this lol

[Schuschi_Eyes (Martin S.)]

Hmm, looks like this is a general issue of Webflow as other people already posted about this:

Interactions on older Safari browsers

Hi, I created my first Webflow site a couple of weeks ago. Testing it on several browsers, it looks great on most, except for older Safari versions. I’ve noticed that interactions aren’t functioning on an iPhone 11 and also on Safari in Big Sur (version 14.1). It seems to be a common issue across all websites built in Webflow. Is there a solution to fix this? I’m also curious if any of you have adopted a different approach due to this lack of support? Thanks!

and

Webflow Website not Functioning for Old IOS Versions

Creating my website on Webflow and coming across an issue where Phone versions work differently on old IOS devices. All Android systems work fine but before IOS 16, website has a lot spacing and animation issues. I am using a template called Marketino from the Webflow library. Does anyone know how to fix this issue?

If support for older browsers is important to your project, I’m not sure there’s a better “quick fix” than simply removing the animations. You may be able to recreate some of the animations with CSS (e.g. hover animations), which should work better than the animations created with Webflow Interactions.

[Stan (justAnotherDeveloper)]

The oldest Safari I have on one of my computers is 15.6.1 (current version → 17.5) and animations works as expected.

15.2 was released in 2021

Safari 15.2 Release Notes | Apple Developer Documentation

The question is why you need back compatibility with ancient Safari. Do you also test back compatibility eg. for IE?

Needs of browser back compatibility is important if you

1. creating website with governmental content
2. presume that visitors of you website will predominately use ancient Apple products

AFAIK majority Apple Mac users update regularly when new OS and Safari update is released.

Anyway, check if -webkit is used eg. -webkit-animation , -webkit-transform etc. if not it is WF issue

m2c