Problem with showing my site correctly in Safari

Hey everybody :wink:

My site looks good on Chrome, Firefox & Edge.
But when I try to show it on Safari a huge part of the site go away.

Have somebody had the same experience?

Best Regards
Jeppe

Hi @Jeppevinum

You will need to add some screenshots or video to show the differences in order for people to suggest fixes :slightly_smiling_face:

Also whenever you need help on a site - don’t forget the read-only link - that’s the best way to get advice when people can see your settings.

Hey Thank you letting me know :slight_smile:

Here is my shared link. https://preview.webflow.com/preview/flowerhaus?preview=080a7b59d6b5f9bc754cd77afe0b57f8

Right now i made a working landingpage, so people are not going to the wrong page.

So if you wanna see where its wrong, you go to: http://flowerhaus.webflow.io/agency

Hi @Jeppevinum,

First of all, I really like your design :wink:

For your safari problem I ran into the similar issue on a custom menu I made recently.

The problem :
Safari is interpreting the CSS rule overflow hidden (set on your container div parent of the red div) differently from other browsers.
Normally overflow hidden will not affect elements that are fixed positioned as they will be regarding the viewport. Safari on the other hand will keep the hidden behaviour even when the element is fixed resulting in not displaying it.

The solution :
Regarding your structure you will not (correct me if I’m wrong) notice a difference to extract the red div out of the container one. Therefore you can remove the container as the red one is fixed and will ignore its parent to calculate its position and shouldn’t affect your layout.

On my end it fixes the problem with safari and it should result in the same behaviour on every browser (plus you get rid of an unnecessary div which is always pleasant for structure)

Another side note unrelated to your issue is that I will try to avoid negative z index as I remember reading about some unexpected behaviour on some browsers version. If you experience overlapping issues try to build your way up from z-index 0. (this information might be outdated but as it doesn’t change the end result I thought it could be useful :slight_smile: )

I hope it will help you, let me know and keep up the good work.

Max

2 Likes

Hey Max :slight_smile:
Thank you very much.
I’m really glad that you like the design after all.

Now I see the page content.
But it was necessary to make little more rearranging.

I extracted brand, language & navbar-toggle out of the container-div.

I get one more smaller problem.
The footer content trigger, do not work on Safari too.

Can you take a second look?

Best Regards
Jeppe

Hey @Jeppevinum,

May be I overlooked something on your problem. Would you be kind enough to describe more precisely what is not working for you so I can focus on how to solve it?

May be some screenshots of the unexpected behaviour would help?

Thanks

1 Like

I corrected the text above :wink:

Hi @Maximosaurus ,

I am new to Webflow and programming. I am trying to fix some bugs of our companies website which is built by Webflow. I have encountered the similar issue that @Jeppevinum faced. However the website works fine on Google Chrome, Firefox, Edge; it does not work properly on Safari. At the initial upload of the website, Safari navigates automatically to the footer of the page and some other content ant functionalities do not work proper. I have read your explanation but I was not able to understand the solution. Would you give some more spesific and obvious solution.

Best regards.